7 replies

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]

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

className={isOpen ? "w-[300px]" : "w-[60px]" }