Arbitrary variants only work when written as single string

[Christopher96u]

🐛 Issue: Arbitrary variants like md:[&_h3] only work when written as a single string

TL;DR

When using md:[&_h3]:text-2xl with utilities like clsx, cn(), or classnames, 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:

className={cn('[&_h3]:text-3xl', 'md:[&_h3]:text-2xl')}

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?