A quick example of generating `:has()` variants with Tailwind. As of right now Safari Technology Preview is the only browser with support for `:has()` and there's currently a few bugs.

index.html

<div class="group flex flex-col">
  <label class="text-gray-500 group-has-disabled:text-red-500">Name</label>
  <input class="border p-2" disabled />
</div>

tailwind.config.js

function hasVariantsPlugin ({ addVariant }) {
  [
    'checked',
    'disabled',
    'focus',
    'invalid',
    'placeholder-shown',
    'playing',
  ].forEach((name) => {
    addVariant(
      `group-has-${name}`,
      
      /*
        Generates something like:
        .group:has(:some-pseudo-class) .group-has-disabled\:some-utility-class
        
        To use like:
        <div class="group">
          <label class="group-has-disabled:text-red-500">Name</label>
          <input class="border p-2" disabled>
        </div>
      */
      [ `:merge(.group):has(:${name}) &` ]
    )
  })
}

module.exports = {
  plugins: [ hasVariantsPlugin ]
}