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>
 );
};

Answer 1

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