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?

[Sam-Kruglov]

@wongjn do you think it could work if we wrote like this but had it "unwrapped" during the build? Postcss or maybe tailwind itself could do this.

[wongjn]

I don't think it could work if we wrote like this but had it "unwrapped" during the build. This is because we'd need to unwrap it from the HTML elements' class attributes as well. There are then a huge variety of systems that would need to have some sort of integration within Tailwind to make this unwrapping work for the HTML side. I've read previously that the Tailwind team would not want to take on such technical debt. See #8337 (comment) for maintainer responses along these lines.

[Sam-Kruglov]

Doesn’t tailwind know what classes I’m using so that it can compile the minimal list of class definitions? If it does then it’s safe to just replace all occurrences of it with the unwrapped version, should be very simple to do in html/jsx/tsx/etc. there’s also existing logic in prettier to sort classes. And there’s a whole language server for intellisense. None of that can be used?

[wongjn]

Doesn’t tailwind know what classes I’m using so that it can compile the minimal list of class definitions? If it does then it’s safe to just replace all occurrences of it with the unwrapped version, should be very simple to do in html/jsx/tsx/etc.

See #8337 (comment) for responses to this.

there’s also existing logic in prettier to sort classes. And there’s a whole language server for intellisense. None of that can be used?

No, these don't catch every possibility of where classes could be defined in any programming language.

Tailwind is open source so feel free to fork it and add this feature if you'd like.

[Sam-Kruglov]

I found a solution: https://stackoverflow.com/a/78286098/6166627

Here's how it worked for me for v4:

Create a twPluginJoin.mjs:

import plugin from 'tailwindcss/plugin'

module.exports = plugin.withOptions(() => ({ matchUtilities }) => {
  matchUtilities({
    join: value => ({
      [`@apply ${value.replaceAll(',', ' ')}`]: {}
    })
  })
})

Import it into your global .css file:

@plugin "./twPluginJoin.mjs";

Lastly, update intellisense to get proper syntax highlighting (in intellij that is in the tailwind plugin settings):

"experimental": {
    "classRegex": [["join-\\[((?:[\\w-]+,?)+)\\]", "([^,]+)"]]
  }

Usage:

className="[&_button]:join-[min-w-0,p-0] flex gap-1"

[Sam-Kruglov]

@wongjn do you think tailwind could have it built-in? Maybe prettier like this className="[&_button]:[min-w-0 p-0] flex gap-1"

[wongjn]

No, 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