Hover, Focus & Other States in Tailwind CSS
From the Tailwind CSS cheat sheet · States & Variants · verified Jul 2026
Hover, Focus & Other States
Style elements based on pseudo-classes and interactive states.
html
<!-- Hover & focus -->
<button class="bg-blue-500 hover:bg-blue-600
focus:outline-none focus:ring-2 focus:ring-blue-400">
Button
</button>
<!-- Active, disabled, first/last child -->
<button class="active:scale-95 disabled:opacity-50">
Submit
</button>
<li class="first:pt-0 last:pb-0">Item</li>💡 Use focus-visible: instead of focus: for keyboard-only focus rings (better UX)
⚡ Combine states: hover:dark:bg-gray-700 applies on hover in dark mode
📌 disabled: automatically sets cursor-not-allowed if you add it alongside opacity
🟢 Use before: and after: with content-[""] to create decorative pseudo-elements
hoverfocusstatespseudo-classes