Tailwind v4 supports functional custom utilities:

@utility tab-* {
  tab-size: --value(integer);
}

It would be useful to have the same CSS-first pattern for custom variants:

@custom-variant theme-* {
  &:where([data-theme="--value(*)"], [data-theme="--value(*)"] *) {
    @slot;
  }
}

<div class="theme-[midnight]:bg-slate-950 theme-[high-contrast]:ring-2">
  ...
</div>

This would bring CSS-first parity with dynamic variants, similar in spirit to what matchVariant enables in JavaScript plugins.

Related: #16442

I opened this one because that was a question, not really a feature request. But feel free to close this as a duplicate.