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]" }

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]" }

alanOP•14mo ago

awesome! thank you very much

Furki4_4•14mo ago

YouTube

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...