Allow custom variants to be used in css

[orteth01]

Currently it doesn't seem as if we can use custom variants in css.

given a custom variant like this:

@custom-variant size-large (&:where([data-size="large"]));

it would be nice if we were able to use size-large in css like we can with built in variants. e.g.:

.button {
  @variant size-large {
    @apply px-4 py-2;
  }
}

currently, this results in an error: Internal server error: Cannot use @variant with unknown variant: size-large.

---

custom variants can be used with @apply

.button {
  @apply size-large:px-4 size-large:py-2
}

but

• we need to repeatedly use the custom variant prefix for every style (i.e. no nesting)
• the resulting css isn't nested, when it could be

e.g.:

/* custom variants with @apply output */ 
.button {
  &:where([data-size="large"]) {
    padding-inline: ...;
  }

  &:where([data-size="large"]) {
    padding-block: ...;
  }
}

VS 

/* this would be nicer */
.button {
  &:where([data-size="large"]) {
    padding-inline: ...;
    padding-block: ...;
  }
}

is it possible to do this? I'd be interested in contributing or helping out, if so.

[wongjn]

It already is possible as per this Tailwind Play. Rather, your problem could be perhaps that you need to include a @reference statement.

[orteth01]

thank you for the quick response! you're right, it does work already.