The bit

Description

Regular Tailwind modifiers

hover:text-red-500 focus:text-red-500 active:text-red-500

.hover\:text-red-500:hover {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity));
}
.focus\:text-red-500:focus {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity));
}
.hover\:text-red-500:hover {
    --tw-text-opacity: 1;
    color: rgb(239 68 68 / var(--tw-text-opacity));
}

Grouped modifiers

[&:is(:hover,:active,:focus)]:text-blue-500

.\[\&\:is\(\:hover\2c \:active\2c \:focus\)\]\:text-blue-500:is(:hover,:active,:focus) {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity));
}

The code

Template

<div class="flex flex-col gap-3 items-start">

  <button class="text-black hover:text-red-500 focus:text-red-500 active:text-red-500">
    Hey look mom I made this text turn red on hover, focus and active
  </button>
  
  <button class="text-black [&:is(:hover,:focus,:active)]:text-blue-500">
    Roses are red, violets are blue, Tailwind is great and so are you.
  </button>
  
</div>