Tailwind CSS Academy · Lesson

Hover and Active Variants

Use hover:* and active:* prefixes to change colors, shadows, and transforms when a user interacts with an element.

Pseudo-State Variants in Tailwind

CSS pseudo-classes like :hover, :active, and :focus let you apply styles only when specific user interactions occur. In Tailwind, you access these by prefixing any utility with the variant name and a colon. For example, hover:bg-blue-600 changes the background color only while the cursor hovers over the element. This eliminates the need for custom CSS rules for the most common interactive states.

<!-- Basic hover state -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
  Hover me
</button>

hover: Prefix in Practice

The hover: prefix applies styles when the user's cursor is over an element. You can hover-prefix any Tailwind utility: color, shadow, scale, opacity, text decoration, and more. The combination hover:shadow-lg hover:-translate-y-1 creates the popular card lift effect where a card appears to rise off the page as the cursor approaches it.

<!-- Card with multiple hover effects -->
<div class="max-w-xs bg-white rounded-xl p-5 shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer border border-gray-100">
  <div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center mb-3">
    <span class="text-indigo-600 font-bold">A</span>
  </div>
  <h3 class="font-bold text-gray-900">Analytics Card</h3>
  <p class="text-sm text-gray-500 mt-1">Hover to see lift effect</p>
</div>

All lessons in this course

← Back to Tailwind CSS Academy