Introduce a Simplified Syntax for Grouping Pseudo Classes in Tailwind CSS 🌟

[Tapesh-1308]

While working extensively with Tailwind CSS, I've encountered a recurring issue that results in lengthy and repetitive class names, particularly when utilizing pseudo classes.

For instance:
"lg:flex lg:flex-row lg:px-4 hover:text-white hover:bg-black"

The repetitive use of prefixes like lg: and hover: not only clutters the HTML but also increases the potential for errors and makes the code less maintainable.

To address this, I propose introducing a more concise syntax for grouping pseudo classes and their respective styles. Consider the following alternative syntax:

"lg:flex|flex-row|px-4 hover:text-white|bg-black"

Here, I've employed the | character as a delimiter to encapsulate multiple pseudo classes under a single class declaration. This approach minimizes redundancy, enhances readability, and promotes cleaner code organization.

Implementing such a feature would not only streamline the development process but also fortify Tailwind CSS's efficiency and versatility.

If a similar capability already exists within Tailwind CSS that I'm unaware of, I'd appreciate any guidance or pointers.
🙏Thank you for considering this enhancement request.

[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

[terragady]

Is there anything that has been done in this regard?