how to make tailwind utility class dynamic

Question

I want to create a simple square using tailwind, but I want to make the class dynamic

const Design1 = () => { var h = 10; var w = 10; return ( <div className="bg-[#1a1b1a] h-[100vh] w-[100vw] relative "> <BackAndCodeButton /> <div className="flex h-[100vh] items-center justify-center "> <div className={` w-20 h-20 bg-white`}></div> //This one works <div className={` w-${w} h-${h} bg-white`}></div> //but I want it to work this way </div> </div> ); };

Related: How do you reference dynamic classes/utilities using a JS variable and pass them through in the class attribute inline in HTML? — rozsazoltan
– rozsazoltan, Commented Sep 19 at 9:21

MagnusEffect · Accepted Answer · 2022-06-29 16:44:06Z

TailwindCSS doesn't allow you to generate classes dynamically. So when you use the following to generate the class…

`w-${w}`

…TailwindCSS will not pick that up as a valid TailwindCSS class and therefore will not produce the necessary CSS.

Instead, you must include the full name of the class in your source code. You can return the full value like this

function myFunc(val) { return "w-"+val ; }

where val is your size value you are passing like 10 here.

By doing it this way, the entire string for every class is in your source code, so TailwindCSS will know to generate the applicable CSS.

Read more: https://tailwindcss.com/docs/content-configuration#class-detection-in-depth

Collectives™ on Stack Overflow

how to make tailwind utility class dynamic

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related