0
209
Viewshow to make tailwind utility class dynamic
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>
);
};
·
Juan Pablo Isaza
1 answers
Answer question0
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
·
Juan Pablo Isaza
Report
Answer question