Tailwind: Apply custom CSS to variant

In addition to applying utility classes to variants via HTML like with the hover:text-blue-600 variant here:

<div class="hover:text-blue-600">Hello there</div>

You can also apply styles based on a variant inside CSS:

@layer components {
  .btn {
    @variant hover {
      @apply text-green-600;
    }
  }
}