how to get conditional tailwind classes to work
I have this
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
it works as expected. how do I re-enable the conditional logic without breaking it?4 Replies
tailwind classes are evaluated at build time
you cannot dynamically create classes
Solution
so you'll have to do
className={isOpen ? "w-[300px]" : "w-[60px]" }
awesome! thank you very much
please watch this video: https://www.youtube.com/watch?v=guh9qzxkb1o&t=1s
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...