[V4] matchVariant (from plugin) equivalent in CSS (aka dynamic variant)

[Kiyozz]

The documentation is missing a section about the matchVariant from plugin.

Is it possible to use an equivalent of matchVariant function from plugin in the new CSS syntax?

@variant is not dynamic nor @custom-variant (or missing documentation about it).

I'm building something to support slot-[loader]:text-red-400 for example. As a bonus, is it possible to remove the brackets and tailwind to understand to use loader here like slot-loader:text-red-400? V4 now supports to drop those brackets for grid-cols-xxx or w-xxx for example.

// slot-[slot] -> [data-slot=$slot]
matchVariant('slot', (slot) => {
  return `[data-slot="${slot}"]`
})
// slot-[slot] -> &[data-slot=$slot]
matchVariant('self-slot', (slot) => {
  return `&[data-slot="${slot}"]`
})

Thanks for your help.

[adamwathan]

No CSS API for this yet I'm afraid, still trying to crack the syntax. Any suggestions?

[Kiyozz]

It will be cool if we could build something like

@variant slot-* ([data-slot="@value"]) /* or whatever the name, or maybe @slot */

@slot already exists in @utilities if I remember correctly.

So I could use slot-loader:text-red-400 for example

[scriptogre]

This would be awesome to have!

[nilennoct]

What about this? Just like Functional utilities:

@theme {
    --lang-en: en;
    --lang-ar: ar;
}

@custom-variant lang-* (&:lang(--value(--lang-*, [*])));

[Kiyozz]

What about this? Just like Functional utilities:

@theme {

    --lang-en: en;

    --lang-ar: ar;

}



@custom-variant lang-* (&:lang(--value(--lang-*, [*])));

The problem here, is that your values are explicit, you need to specify a list of accepted values

[nilennoct]

The --lang-* in @theme is optional. It's possible to use lang-[fr]:bg-white like aria-[modal=true]:bg-white if not specified.

[Kiyozz]

It would be cool to omit the brackets.

[ShaneYu]

I presume this hasn't changed sine 10th April 2025 (last post)? I was looking to introduce some dynamic custom variants for setting view-transition related properties.

For example vtg- for ::view-transition-group() like vtg-[blog-card]:z-50.

vtg- - ::view-transition-group
vti- - ::view-transition-image-pair
vto- - ::view-transition-old
vtn- - ::view-transition-new

To be able to set properties relating to view transitions from Tailwind classes, rather than needing to add some disconnected styling in the CSS files directly when all the other styling is done in the component(s) via classes.

We could have done this easily with matchVariant in version 3 of Tailwind, but still, as far as I am aware, unable to with version 4.