Add has-* variants for :has(...) pseudo-class

[adamwathan]

This PR adds new has-*, group-has-*, and peer-has-* variants that add support for the :has() pseudo-class.

This is a recent CSS feature that makes it possible to style parent elements based on their descendants. Check out this great article on the Chrome Developers blog for lots of practical examples.

These are dynamic variants that accept a selector as their argument:

<div class="has-[[data-potato]]:grid">
  <div data-potato>...</div>
</div>

<!-- Generated CSS-->
<style>
  .has-\[\[data-potato\]\]\:grid:has([data-potato]) {
    display: grid
  }
</style>

I've included group-* and peer-* variations as well:

<div class="group">
  <div class="group-has-[[data-potato]]:grid">...</div>
  <div data-potato>...</div>
</div>

<!-- Generated CSS-->
<style>
  .group:has([data-potato]) .group-has-\[\[data-potato\]\]\:grid {
    display: grid
  }
</style>

<div>
  <div class="peer">
    <div data-potato>...</div>
  </div>
  <div class="peer-has-[[data-potato]]:grid">...</div>
</div>

<!-- Generated CSS-->
<style>
  .peer:has([data-potato]) ~ .peer-has-\[\[data-potato\]\]\:grid {
    display: grid
  }
</style>

We've decided not to add a key for has to the theme configuration, and instead just recommend using arbitrary values. If it proves to be extremely useful to define aliases for has-* we may revisit this in the future.

[Gravy59]

How will this work on firefox? Is there a polyfill or similar?

[brandonmcconnell]

How will this work on firefox? Is there a polyfill or similar?

@Gravy59 you can find one here: https://github.com/jplhomer/polyfill-css-has

Polyfills are usually outside the scope of tailwind, as TailwindCSS is purely a utility-to-CSS compiler, so I don’t think we’ll see any sort of polyfill support for this come to tailwind as a core feature, but you can still implement it on your end to make use of the utility.

Personally, I think it’s better for a framework like this to be more on the bleeding edge than wait for browser compatibility so the people who want to use utilities for progressive enhancement can.

[LorenzoBloedow]

I think there should probably be a warning when Tailwind compiles saying that Firefox still doesn't support it, with Tailwind I feel like the expectation from a lot of developers is that of not worrying too much about browser compatibility, so a heads-up would probably help a lot of folks out there!

[rleecrewmp]

Are there any plans to have an inverse of the group-* variant such as child-* to make use of modifiers and style based on specific child elements?

<div class="child-hover/first-link:bg-red-100">
  <button class="child/first-link">First Link</button>
  <button class="child/second-link">Second Link</button>
</div>

<!-- Generated CSS-->
<style>
  .child-hover\/first-link\:bg-red-100:has(.child\/first-link:hover)  {
    background-color: #fee2e2
  }
</style>