support specifying multiple variants with one @variant block

[orteth01]

if I do something like this in css

@variant variant1, variant2 {
    background-color: red;
}

i get an error like Cannot use @variant with unknown variant: variant1, variant2

tailwind play example

I am used to being able to apply styles to multiple comma-separated things in css e.g.

.class1,
.class2 {
   ...
}

@media screen, print {
  body {
    line-height: 1.2;
  }
}

etc.

It would be cool if I could do the same with tailwind variants.

if this is deemed valuable, i'd be very interested in contributing/implementing this feature.

[rozsazoltan]

For variants, I think it's rare that you would need to repeat utilities for different variants. Grouping, in my opinion, is much more common:

• Allowing grouped listing of variants in the `@variant` directive, similar to how classes are grouped using colons (:). #18152

In your case, I think it's simpler to declare a new variant to merge the existing two variants.

• https://play.tailwindcss.com/cKq4QCJQOP?file=css

@import "tailwindcss";

@custom-variant hover-and-focus-visible {
  @variant hover {
    @slot;
  }
  @variant focus-visible {
    @slot;
  }
}

@layer base {
  button {
    color: white;
    background-color: grey;
    padding: 4px;

    @variant hover-and-focus-visible {
      background-color: red;
    }
  }
}

This would also work with the current inline HTML syntax.

<div class="hover:bg-red-500 focus-visible:bg-red-500">...</div>
<div class="hover-and-focus-visible:bg-red-500">...</div>

But of course, extending the inline HTML syntax is harder, because it would bloat the generated CSS. (See more: #8337 (reply in thread))

With @variant, providing a merge could be justified. Since duplication would occur here anyway, even without it.

The best approach, in any case, is to use inline HTML:

Essentially if you ever find yourself doing something like:

.btn {
  @apply px-4 py-2 rounded bg-blue-500 text-white;
}

Stop, slap yourself hard, once, and make a <Button> component instead:

<button class="px-4 py-2 rounded bg-blue-500 text-white">
  <slot/>
</button>

Source: Moni

• Use inline utilities instead of CSS

Tip

Always use the appropriate CSS layer. Unlayered CSS is too strong, and TailwindCSS utilities won't be able to override it later.

• From v4 the reset style cannot be overridden by TailwindCSS classes

[orteth01]

thanks for the reply @rozsazoltan

we have quite a few cases where specifying multiple variants with one @variant block would be valuable and reduce a lot of repetition. we've generally considered most of what you said already. e.g. we have made the decision to write in css instead of inline for our core components for a variety of reasons. and we see creating a custom variant that is a combination of other variants as a workaround, but not an ideal solution for this specific error.

comma-separating is common in css, and was our natural instinct when we had the same styles that needed to be applied to different variants.

[wongjn]

#19996 merged to support this 🥳