Proposal: Grouped Variant Utility Classes with Pipe Syntax (hover:|...|, sm:|...| dark:|...|)

[hassanullahusmani45]

Feature Request: Grouped Utility Class Syntax Using Pipes (|...|) for Variants

Summary

Tailwind CSS provides a powerful and expressive system using variants like sm:, hover:, dark:, focus:, etc. However, when combining many variants and multiple utility classes, the resulting class attribute becomes cluttered and hard to read or maintain.

I propose a grouped variant syntax using pipes |...| to improve readability, reduce repetition, and logically group classes under a single variant prefix.

---

💡 Proposed Syntax

Example:

<dev className="text-base m-2 sm:|text-lg m-3| hover:|text-red-500 underline| dark:|bg-black text-white|">
  Afghanistan
</dev>

---

Benefits

✅ Much cleaner class attributes when using multiple variants.
📚 Improved readability, especially with long class lists.
🧠 Logical grouping helps developers spot which styles apply under which condition.
🧑‍💻 Better DX (developer experience) during authoring and reviews.
💡 Works naturally with all variants: hover:, focus:, group-hover:, dark:, disabled:, aria-..., etc.

[wongjn]

There have been suggestions about adding such a feature. The maintainers have addressed this request before, that you may wish to read up on if you have not already done so:

• A Twitter thread from the creator of Tailwind, Adam Wathan
• A previous GitHub discussion thread with maintainer responses

[hassanullahusmani45]

Thanks for the pointer!

I just read the tweet from Adam — it's great to know that this exact concept has already been explored and even prototyped by the team.

It’s reassuring to hear that the idea fits well into the existing design of Tailwind’s compiler. I’d love to see this eventually supported officially, as I think it brings major readability and DX improvements, especially for teams working on large component libraries.

Even if not on the roadmap now, I appreciate the transparency and thoughtfulness the team brings to every feature. 🙌