Hover and focus states make your interface feel alive. Tailwind provides state modifiers that let you define how elements look when users interact with them — hovering, focusing, pressing, and more.
Hover state
<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded">
Hover over me
</button>
<a href="#" class="text-blue-600 hover:text-blue-800 underline">
Link darkens on hover
</a>
<div class="bg-white hover:bg-gray-50 hover:shadow-lg transition p-4 rounded-lg cursor-pointer">
Card with hover effect
</div>
Focus state
Focus states are critical for accessibility. When users navigate with a keyboard, they need to see which element is currently focused.
<input class="border border-gray-300 focus:border-blue-500 focus:ring-2
focus:ring-blue-200 outline-none px-4 py-2 rounded">
<button class="bg-blue-500 focus:ring-4 focus:ring-blue-300 text-white px-4 py-2 rounded">
Focus ring on click
</button>
Active state
Active styles apply when an element is being clicked — the moment between mousedown and mouseup.
<button class="bg-blue-500 active:bg-blue-800 text-white px-4 py-2 rounded">
Darkens while being clicked
</button>
Other state modifiers
<!-- Disabled state -->
<button class="bg-blue-500 disabled:bg-gray-300 disabled:cursor-not-allowed" disabled>
Can't click me
</button>
<!-- Group hover -->
<div class="group bg-white p-4 rounded-lg hover:bg-blue-50">
<h3 class="group-hover:text-blue-600 font-bold">Title changes on parent hover</h3>
</div>