Hover, Focus, and State Variants

Tailwind's variant system lets you apply utilities conditionally based on element state. The pattern is always state:utility. No extra CSS needed.

Hover and focus

<button class="bg-blue-600 hover:bg-blue-700 focus:outline-none
  focus:ring-2 focus:ring-blue-400 active:scale-95 transition-colors">
  Submit
</button>

<input class="border border-gray-300 focus:border-blue-500
  focus:ring-1 rounded px-3 py-2" />

Disabled state

<button class="bg-blue-600 text-white disabled:opacity-50
  disabled:cursor-not-allowed" disabled>
  Can't click
</button>

Group modifier

Mark the parent with group, then use group-hover: on children to style them based on parent state.

<div class="group flex items-center gap-2 p-4 hover:bg-gray-50 rounded-lg">
  <span class="text-gray-700 group-hover:text-blue-600">Menu item</span>
  <svg class="opacity-0 group-hover:opacity-100 transition-opacity">...</svg>
</div>

Stacking variants

Variants stack left to right, outermost condition first: dark:hover:bg-gray-700 applies on hover only in dark mode. md:hover:scale-105 applies on hover only at medium breakpoints.