Apply multiple classes to the same tailwind selector

[BarakChamo]

Hello folks,

It's my first issue on the tailwind repo after using Tailwind on every single project for a long time.
It's an incredible project and I am very excited for 4.0 to come out!
Thanks for your amazing work!

Following recent updates to tailwind, we know use the group- *- and has- selectors extensively on new projects
to simplify our styling and even remove code that was previously necessary to create complex interactive styles.

The ability to combine selectors like group, has and state into a single powerful rule is incredibly useful.

For example, for carousels I recently used:
group-has-[:checked]:h-0 group-has-[:checked]:opacity-0
To transition parts of a label but also fade them out.

Or on a set of step markers, I use:
*:after:w-0.5 *:after:h-3 *:after:bg-inherit

However, with this powerful new syntax, comes significant pseudo selector bloat, and our styling rules are by far the longest lines in our components.

Even your example in the recent blogpost announcing has support was getting out of control:

<label class="has-[:checked]:ring-indigo-500 has-[:checked]:text-indigo-900 has-[:checked]:bg-indigo-50 ..">
  <svg fill="currentColor">
    <!-- ... -->
  </svg>
  Google Pay
  <input type="radio" class="accent-indigo-500 ..." />
</label>

I would like to propose a feature for multiple rules grouped under one selector, which would make it a lot cleaner in targeting pseudo elements or component state.

This may have come up before, but I haven't seen anything in issues.

For example (syntax is just for reference):

Suppose I want to apply the same rules as in the example above, the syntax could be simplified to:

<label class="has-[:checked]:(ring-indigo-500 text-indigo-900 bg-indigo-50)">

Side by side that is:
before:
has-[:checked]:ring-indigo-500 has-[:checked]:text-indigo-900 has-[:checked]:bg-indigo-50
after:
has-[:checked]:(ring-indigo-500 text-indigo-900 bg-indigo-50)

Or from an example creating a list of vertical steps with connecting lines (typical step component):
before:
*:cursor-pointer *:p-0.5 *:size-4 *:relative *:rounded-full *:after:w-0.5 *:after:h-3 *:after:bg-inherit *:after:absolute *:after:bottom-full *:after:left-1/2 *:after:-ml-px
after:
*:(cursor-pointer p-0.5 size-4 relative rounded-full) *:after:(w-0.5 h-3 bg-inherit absolute bottom-full left-1/2 -ml-px)

Of course, this could be avoided by creating custom component styles with @apply, but that would mean losing the colocation of styles and components which has always ended up causing us more pain that it was worth.

[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

[BarakChamo]

Thanks for the reference to the previous discussions @wongjn