Tailwind CSS Tutorial · Interactivity and States · Lesson 15 of 27
Hover, Focus and Other States
Styling interactive states with variants: hover, focus, focus-visible, active, disabled, first, last, odd and more.
Variants
Put a state in front of any class and it applies only in that state:
| Variant | When |
|---|---|
hover: |
the pointer is over the element |
focus: / focus-visible: |
the element has focus / keyboard focus |
active: |
while it's being pressed |
disabled: |
the control is disabled |
first:, last:, odd:, even: |
position among siblings |
placeholder:, file:, selection: |
parts of an element |
Use focus-visible: for focus rings so mouse users don't see them after clicking, while keyboard users do.
<div class="flex flex-wrap gap-4 p-6">
<button class="rounded-lg bg-indigo-600 px-4 py-2 font-medium text-white hover:bg-indigo-500 active:bg-indigo-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
Hover, press, Tab to me
</button>
<button disabled class="rounded-lg bg-indigo-600 px-4 py-2 font-medium text-white disabled:cursor-not-allowed disabled:opacity-50">
Disabled
</button>
<input placeholder="Type here" class="rounded-lg border border-gray-300 px-3 py-2 placeholder:text-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 focus:outline-hidden">
</div>
Lists
<ul class="m-6 max-w-sm overflow-hidden rounded-xl border">
<li class="px-4 py-3 odd:bg-white even:bg-gray-50 hover:bg-sky-50 first:font-semibold">Name (first:)</li>
<li class="px-4 py-3 odd:bg-white even:bg-gray-50 hover:bg-sky-50">Ada Lovelace</li>
<li class="px-4 py-3 odd:bg-white even:bg-gray-50 hover:bg-sky-50">Grace Hopper</li>
<li class="px-4 py-3 odd:bg-white even:bg-gray-50 hover:bg-sky-50">Alan Turing</li>
</ul>
Test yourself
Which variant shows a focus ring for keyboard users but not after a mouse click?
focus-visible:focus:active:hover:
Show answer
Answer: focus-visible:
Browsers match :focus-visible when focus should be visibly indicated, typically for keyboard navigation.