Hover, Focus and Other States
Apply styles only on hover, focus, and active with state prefixes.
Syntax
class="hover:bg-cyan-700"Add a state prefix to make a utility apply only in that state. For example hover:bg-cyan-700 changes the background only while the mouse is over the element.
hover:— pointer is over the element.focus:— element is focused (e.g. a clicked input).active:— element is being pressed.disabled:— element is disabled.
Hover the button below to watch its color change.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer darkens a button background on hover by adding hover:bg-blue-700 alongside the default bg-blue-600 class.
- A form designer highlights an input with a colored ring when it receives focus by applying focus:ring-2 focus:ring-indigo-500.
- A navigation link underlines only on hover by using hover:underline, keeping the default state clean without JavaScript.
More examples
Hover button color change
hover:bg-blue-700 applies the darker background only when the cursor is over the button, transitioning smoothly with transition-colors.
<button class="bg-blue-600 text-white px-4 py-2 rounded
hover:bg-blue-700 transition-colors">
Submit
</button>Focus ring on input
focus:ring-2 and focus:ring-indigo-500 add a visible indigo ring only when the input is focused, improving keyboard accessibility.
<input
type="email"
class="border border-gray-300 rounded px-3 py-2 w-full
focus:outline-none focus:ring-2 focus:ring-indigo-500"
placeholder="[email protected]"
/>Active and disabled states
active:scale-95 subtly shrinks the button on click, while disabled: utilities grey it out and show a not-allowed cursor when disabled.
<button
class="bg-emerald-500 text-white px-5 py-2 rounded
hover:bg-emerald-600
active:scale-95
disabled:opacity-50 disabled:cursor-not-allowed"
>
Save
</button>
Discussion