Arbitrary variants only work when written as single string #18552
Unanswered
Christopher96u
asked this question in
Help
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
🐛 Issue: Arbitrary variants like
md:[&_h3]
only work when written as a single stringTL;DR
When using
md:[&_h3]:text-2xl
with utilities likeclsx
,cn()
, orclassnames
, if the class is split across multiple strings, Tailwind fails to generate the responsive utility — even in Tailwind CSS v4. This makes responsive arbitrary variants unreliable when conditionally composed.❓ Context
In our React app (Tailwind CSS v4), we often write class names using a utility like
cn()
to compose them:However, this does not apply md:[&_h3]:text-2xl. That class gets completely ignored during build.
After trial and error, we found that putting the entire class in a single string works:
className={cn('[&_h3]:text-3xl md:[&_h3]:text-2xl')}
are we doing something wrong?
Beta Was this translation helpful? Give feedback.
All reactions