Part 39: Hover, Focus & Active State Modifiers

Tailwind includes state variants that let you style elements dynamically based on user interaction without writing custom CSS rules.

1. Hover (hover:*)

Apply styles when the user hovers over an element with a mouse pointer:

<button class="bg-blue-600 hover:bg-blue-700 hover:shadow-lg text-white font-semibold py-2 px-4 rounded transition duration-200">
  Hover Me
</button>

2. Focus (focus:*)

Style inputs and buttons when they receive keyboard or click focus:

<input 
  type="text" 
  class="border border-slate-300 p-2.5 rounded-lg focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 transition"
  placeholder="Focus to see blue glow"
/>

3. Active (active:*)

Style elements at the precise moment they are being clicked (depressed):

<button class="bg-emerald-600 active:scale-95 active:bg-emerald-700 text-white py-2 px-5 rounded-lg transition transform">
  Click Press Feedback
</button>

Key Takeaways

• Prefix any utility with hover:, focus:, or active:.
• Combine with transition for smooth micro-interactions.

In Part 40, we explore Focus-Visible, Focus-Within & Disabled States!