how to get conditional tailwind classes to work

I have this
<div className={`w-[${isOpen ? "300px" : "60px"}]`}>
<div className={`w-[${isOpen ? "300px" : "60px"}]`}>
and see in devtools resolving to w-[300px] for example, but width is not defined. however, if I remove the conditional logic and just set
<div className={`w-[300px]`}>
<div className={`w-[300px]`}>
it works as expected. how do I re-enable the conditional logic without breaking it?
Solution:
so you'll have to do className={isOpen ? "w-[300px]" : "w-[60px]" }
Jump to solution
4 Replies
iDarkLightning
iDarkLightning13mo ago
tailwind classes are evaluated at build time you cannot dynamically create classes
Solution
iDarkLightning
iDarkLightning13mo ago
so you'll have to do className={isOpen ? "w-[300px]" : "w-[60px]" }
alan
alan13mo ago
awesome! thank you very much
Furki4_4
Furki4_413mo ago
ByteGrad
YouTube
Avoid This Tailwind Mistake (Dynamic Classes)
Here's how Tailwind works behind the scenes... 👉 Professional JavaScript Course: https://bytegrad.com/courses/professional-javascript 👉 Professional CSS Course: https://bytegrad.com/courses/professional-css 👉 Email newsletter (React + Next.js course out soon!): https://email.bytegrad.com 💻 Premium Courses: Professional JavaScript: https://byte...
Want results from more Discord servers?
Add your server