conditional @apply

[DeVoresyah]

what I mean about "conditional" here is something like this

<div class="container md:bg-blue-500 lg:bg-red-500" />

it means when the screen at medium the background will be blue and at the large screen, the background will be red right?

so for me, inline style is too long and I prefer to use @apply directive. But there's no conditional like this

@apply md:bg-blue-500 lg:bg-red-500

[tlgreg]

Variants can't be used with @apply, you would create a *:hover (example) ruleset and use @apply inside that.
For responsive breakpoints, tailwindcss provides the @screen at-function.
Docs: https://tailwindcss.com/docs/functions-and-directives#screen

div:hover {
  @apply bg-green-500;
}

@screen md {
  div {
    @apply bg-blue-500;
  }
}

@screen lg {
  div {
    @apply bg-red-500;
  }
}