Core Concepts
Hover, Focus and States
State variants let you change styles on interaction — hover, focus, active, disabled and more — right in your class list.
The variant prefix pattern
Prefix a utility with a state to apply it only in that state: hover:bg-blue-700 changes the background on hover. You can stack them with responsive prefixes too, e.g. md:hover:underline.
Example
<button class="bg-blue-600 text-white font-semibold px-5 py-2.5 rounded-lg
hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 active:scale-95 transition">
Hover, focus & press me
</button>Common state variants
| Variant | When it applies |
|---|---|
| hover: | Pointer is over the element |
| focus: | Element is focused (e.g. a clicked input) |
| active: | Element is being pressed |
| disabled: | Form element is disabled |
| focus-within: | A child of the element is focused |
Example
<div class="space-y-3">
<input class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-sky-500" placeholder="Focus me">
<button class="bg-gray-300 text-gray-500 px-4 py-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed" disabled>Disabled</button>
</div>