Problem with arbitrary values on Tailwind with React

Question

I'm trying to make a react component that changes the width from a parameter but it's doesn't work and I don't know why.

function Bar() {
    
    const p =80

    const style = `bg-slate-500 h-8 w-[${p.toFixed(1)}%]`

    console.log(style)

    return (
        <div className=' h-8 w-full'>
            <div className={`bg-slate-500 h-8 w-[${p}%]`}>
            </div>
        </div>
    )
}
export default Bar

With this code I get a full-size bar, but if I use a strict String with 80.0 it works fine

You're using arbitrary values incorrectly. Have a look at the first paragraph under Dynamic values v2.tailwindcss.com/docs/… your classes need to exist as complete strings for Tailwind to detect them correctly. — Dennis Martinez
– Dennis Martinez, Commented Jan 4, 2022 at 20:41
You can use css variables in some caese text-[color:var(--your-val)] and that pass it through style={ { '--your-var': '#fff' }} — basil
– basil, Commented Jan 18, 2022 at 0:46
Newer docs for V3+: tailwindcss.com/docs/content-configuration#dynamic-class-names — Ed Lucas
– Ed Lucas, Commented Mar 30, 2023 at 21:44

ecoe · Accepted Answer · 2022-10-21 14:15:38Z

32

The other answers are wrong. In Tailwind V3 JIT is included and you won't need to set mode to jit anymore. And even in Tailwind V2 the posted code wouldn't work.

Following the docs, you must avoid string interpolation and use complete class names.

This is wrong:

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

Instead use Complete class names:

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

What about using inline styles?

You may be tempted to use inline styles, but remember Content Security Policies are increasingly under scrutiny to disallow unsafe inlines. Any inline style or script could in theory be injected with unintended content. Furthermore, the whole point to Tailwind is to generate CSS at build time, so you'd be working around it and might as well not even be using it in this case.

edited Oct 21, 2022 at 14:15

ecoe

5,4028 gold badges63 silver badges84 bronze badges

answered Feb 10, 2022 at 10:22

wizard003

8767 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

sir Over a year ago

Why is the first approach wrong?

wizard003 Over a year ago

@sir v2.tailwindcss.com/docs/… , also applies to V3 unless they changed it recently

aseidma Over a year ago

You still need to manually enable jit in tailwind.config as of today. The thing OP did wrong was use string concatenation to build the class, as described in the docs under "Dynamic Values" here. v2.tailwindcss.com/docs/just-in-time-mode#overview

Maxime Lechevallier Over a year ago

@sir because Tailwind is generating classes at build time and won't be aware of the value of padding, so the class p-[80%] won't be exported. Nevertheless, if you add p-[80%] in the safelist array, Tailwind will then add this class at build time. But there is no point on doing this because it would only work for padding = 80;

ecoe Over a year ago

@MaximeLechevallier but inline styles are insecure aren't they? For instance, CORS policy can only permit them with unsafe inline, which is really not always an option... Also, this completely defeats the purpose of tailwind by working around its API doesn't it?

|

kay-adamof · Accepted Answer · 2023-03-25 01:25:56Z

32

I had exactly the same problem as you.

const p =80
<div className={`bg-slate-500 h-8 w-[${p}%]`}>

The above code set "w-[${p}%]" as "w-80%" dynamically on the server side. However Tailwind has no ability to deal with the arbitrary values computed dynamically.

The official Tailwind docs say;

To work around this problem, we need to use style attribute like following in which we are not able to use TailwindCSS anymore😅;

<div
  style={{width: `${p}%`}} 
  className={`bg-slate-500 h-8`}>

See the discussions on GitHub

I hope it helps you a lot.

answered Mar 25, 2023 at 1:25

kay-adamof

4514 silver badges4 bronze badges

Comments

Charles Coppinger · Accepted Answer · 2022-10-31 23:54:58Z

3

I ran into a similar issue building a site with Astro & Tailwind.

The solution I discovered was to use the 'safelist' feature that allows you to define certain classes that will be force-compiled, regardless of whether or not they are found when scanning the specified content locations in the tailwind.config.cjs file.

An example of the code I used to fix my situation:

module.exports = {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
Adding a safelist and classes to it:
safelist: ["lg:grid-cols-[1fr_4fr]", "lg:grid-cols-[1fr_3fr_1fr]"],
...

Here's a link to the relevant area in the Tailwind documentation.

answered Oct 31, 2022 at 23:54

Charles Coppinger

413 bronze badges

1 Comment

Schnitzler Over a year ago

Honestly, this should be the accepted answer

Beni Sinca · Accepted Answer · 2022-02-04 14:58:15Z

1

in tailwind.config.js add mode: 'jit'.

I would suggest https://v2.tailwindcss.com/docs/just-in-time-mode to learn more.

e.g:

module.exports = {
   //other options
   mode: 'jit',
}

answered Feb 4, 2022 at 14:58

Beni Sinca

3844 silver badges15 bronze badges

1 Comment

Muhaddis Over a year ago

How would you handle templates or liquid engines for instance Shopify theme or email templating?

nonybrighto · Accepted Answer · 2022-11-07 16:46:47Z

1

If your p's value is a constant that will be used across the app, you can instead define it in your tailwind.config.js file like this.

theme: {
 extend: {
  spacing: {
    "p-value": "80%",
  },
 }, 
}

Then you can modify your code to this.

<div className="bg-slate-500 h-8 w-p-value">

answered Nov 7, 2022 at 16:46

nonybrighto

9,6336 gold badges49 silver badges60 bronze badges

Comments

olle · Accepted Answer · 2024-02-14 20:25:37Z

1

in React with tailwind Styles follow this pattern:

<div className={`bg-red-500 flex w-[70%] h-[70%]`} style={{boxShadow: `${horizantal}px ${vertical}px ${blur}px ${spraied}px ${color}`}}

edited Feb 14, 2024 at 20:25

olle

5994 silver badges10 bronze badges

answered Feb 13, 2024 at 13:43

Mehrdad Kohanpur

53 bronze badges

Comments

Sajal Singhal · Accepted Answer · 2022-01-25 11:35:39Z

-1

Include mode: 'jit' in tailwind config file

answered Jan 25, 2022 at 11:35

Sajal Singhal

73 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Problem with arbitrary values on Tailwind with React

7 Answers 7

9 Comments

Comments

1 Comment

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

9 Comments

Comments

1 Comment

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related