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 ...;
}

or...

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

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

  &:focus {
    @apply bg-yellow ...;
  }
}

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?