Topics

Theo's Typesafe Cult•9mo ago

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•9mo ago

tailwind classes are evaluated at build time you cannot dynamically create classes

Solution

iDarkLightning•9mo ago

so you'll have to do className={isOpen ? "w-[300px]" : "w-[60px]" }

alan•9mo ago

awesome! thank you very much

Furki4_4•9mo ago

please watch this video: https://www.youtube.com/watch?v=guh9qzxkb1o&t=1s

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

Theo's Typesafe Cult Join

21KMembers

View on Discord

Want results from more Discord servers?

Add your server

More Posts

How do I query self-relations?I guess my schema must be wrong. But I think I've followed the Prisma docs carefully. I currently ha How to call t3stack endpoints from outside of projectI need to call t3 stack project project endpoints from react native project. I tried create-t3-turbo Drizzle-ORM+PSQL: sorry, too many clients already`X tRPC failed on school.getAll: sorry, too many clients already` I guess this is because the connec Disable static generation in Next?I recently migrated my whole code base to RSC and something is really driving me crazy. It seems tha React Native Expo: Take photo with camera and send email with attachmentMy current implementation does not work 100% of the time. I am using expo image manipulator and expo Where To Host My BackEndI am planning to develop a feature-rich website that will have similar functions as social media app Unexpected Auto Refreshing Page on Route Guard RedirectHello people! I'm building an online dictionary website with Next.js 13.5.2, and next-auth for the Need to replicate this functionalitySee the "Friendly Test" section on https://www.friendly.studio/approach .. The image stays and tex Drizzle Schema BooleanHi everyone, I'm trying to create a schema in Drizzle but my SQL knowledge is pretty limited. I wan Nextjs build fails on Docker due to env amid SKIP_ENV_VALIDATIONHey, I'm building an app with nodemailer inside the nextjs app and trying to build it with docker.