Hover & Focus States

Code

<button class="bg-indigo-500 hover:bg-indigo-600 focus:ring-2 focus:ring-indigo-300 focus:outline-none active:bg-indigo-800">
  Hover, focus, active
</button>

<input class="border focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" />

<a class="text-blue-600 hover:text-blue-800 hover:underline visited:text-purple-600">
  Link states
</a>

<!-- Group hover: parent hover styles children -->
<div class="group block p-4 hover:bg-gray-50">
  <span class="text-gray-600 group-hover:text-blue-600">Child</span>
</div>

Explanation

Variant prefixes like hover:, focus:, active:, and visited: apply utilities only in that state. focus:ring adds an accessible focus indicator, and group-hover: styles a child when a parent with the group class is hovered. These replace pseudo-class CSS without leaving the markup.

More Tailwind CSS Snippets