Support theme values for has variant

[crswll]

This allows you to add values for the has variant to your theme so we can do things like:

theme: {
  has: {
    headers: ':where(h1, h2, h3, h4, h5, h6)'
  }
}

<div class="has-headers:bg-green-500">...</div>

over using arbitrary values all the time like:

<div class="has-[:where(h1,h2,h3,h4,h5,h6)]:bg-green-500">...</div>

[adamwathan]

Hey @crswll! Yeah for this one we were deliberate about this — I kind of regret making data-*, aria-*, and supports-* configurable in the theme and didn't want to commit to that again for new variants.

I think what I would recommend instead is just creating a custom variant for has-headers using the addVariant API instead of configuring it in the theme.

In v4 I think this will feel a bit more natural because there will be some sort of very simple syntax for creating these custom variants directly in a CSS file, probably something like:

@import "tailwindcss";

@variant has-headers "&:has-(:where(h1, h2, h3, h4, h5, h6))";

The only downside to this is custom has-* variants like this won't be sorted in the same "group" as the built-in has-* variant, which is definitely kind of unfortunate and maybe enough to warrant revisiting this at some point. But right now just not ready to commit to it so going to say no for the time being.

Thanks either way dude!

[crswll]

No trouble at all. Excited to see how it all works out.