TailwindCSS @apply - the right approach?

Paweล‚ Ludwiczak - Mar 10 '21 - - Dev Community

I've been experimenting with Tailwind quite a lot recently and there's one thing that I can't figure out... Which of these is better:

.element {
  @apply bg-red ... hover:bg-green ... focus:bg-yellow ...;
}
Enter fullscreen mode Exit fullscreen mode

or...

.element {
  @apply bg-red ...;

  &:hover {
     @apply bg-green ...;
  }

  &:focus {
    @apply bg-yellow ...;
  }
}
Enter fullscreen mode Exit fullscreen mode

The latter example is probably more readable but on the other hand it doesn't utilize Tailwind's variants. So I'm wondering if there's any difference between one and the other? Maybe performance?

. . . . . . . . . . . .
Terabox Video Player