how to get conditional tailwind classes to work

I have this
    <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]`}>

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]" }
Was this page helpful?