Add a directive to apply state

[andershagbard]

Instead of the following:

.card {
  @apply bg-gray-50 hover:bg-gray-100 focus:bg-gray-100;
}

It would be awesome if we could do something similar to:

.card {
  @apply bg-gray-50;

  @state hover, focus {
    @apply bg-gray-100;
  }
}

[MangoMarcus]

I'd use native CSS nesting for this now

.card {
  @apply bg-gray-50;

  &:hover, &:focus {
    @apply bg-gray-100;
  }
}

[andershagbard]

This is possible by stacking variants

https://tailwindcss.com/docs/adding-custom-styles#using-variants