Custom composable variants

[benface]

Slightly related to my previous idea which received no reaction (🥲), but different use case: it would be nice if @custom-variant was able to reproduce some of the core composable variants like group, not, and has, and I think I have a good syntax idea for it inspired by @utility.

Imagine a variant similar to has, but that only triggers when a direct child of the element the class is on matches the variant/selector that follows. For instance, if you want an element to have a red background when it has only 1 child, you might think has-only:bg-red does it, but there's a chance of a false positive if any descendant (not just direct children) is an "only child". So what we really want is something like has-child-only:bg-red, where has-child is a custom variant defined like this:

@custom-variant has-child-* (&:has(>:is(@variant)));

The idea is that the * part makes it composable and whatever variant is used there is inserted in the @variant slot.

Hopefully this idea gets a bit more traction than the last. 😄

[ABuffSeagull]

This could also be very helpful for something like shadow dom part selectors.
So something like:

<my-custom-element class="part-inner:bg-green-600"></my-custom-element>

should give:

.part-inner\:bg-green-600 {
  background-color: var(--green-600);
}

Although I guess [&::part(inner)]:bg-green-600 isn't the absolute worst.

[benface]

@ABuffSeagull – I fail to see which part of that example can't already be done with custom variants?

[ABuffSeagull]

I mean you can, but the inner part is completely customizable by the custom element developer. So having to define a new custom variant for every part that you use up front feels like it goes against the spirit of tailwind.

[benface]

Ah, so you're talking about bringing the legacy (but still functional in Tailwind 4 via @plugin) matchVariant's capabilities to @custom-variant! That wasn't quite my proposal, though I'm very much in favor of that as well. In my proposal, you'd need to have a inner variant to be able to "compose" it with part (which doesn't really make sense as a standalone variant, but then the composable has doesn't either).

[ABuffSeagull]

Oh, I see what you mean! Although I do think that part should also compose, since you should be able to do stuff like part-foo-hover:, part-baz-aria-checked:, etc etc.
I'm more or less pointing out that this could unlock much more and future-proof tailwind to new CSS features.
Also thanks for pointing out @plugin, it completely slipped my mind I could do that.

[alker0]

While similar to "Is there a way to create functional variant ?", this proposal would provide clearer use cases and expected behavior.