Interactive States: Hover, Focus, and Active

Adding visual feedback when users hover over buttons or select input fields improves user experience. Tailwind CSS supports this using state modifiers.

1. Hover, Focus, and Active Modifiers

To apply styles on specific interactions, prefix the utility class with the interaction state:

• hover: Triggers when the user cursor hovers over the element (e.g., hover:bg-blue-600).
• focus: Triggers when the element receives focus (e.g., focus:ring-2 for input selections).
• active: Triggers while the element is actively clicked (e.g., active:scale-95).

<!-- Interactive button with hover, focus, and click feedbacks -->
<button className="bg-blue-500 text-white py-2 px-4 rounded transition hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 active:scale-95">
  Interactive Button
</button>

2. Setting Form Inputs Focus Outlines

By default, browsers add a ring outline to active inputs. You can customize this to match your brand style:

<input
  type="email"
  placeholder="Enter email address"
  className="border border-gray-300 px-4 py-2 rounded focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
/>

In this setup:

• focus:outline-none removes the default browser blue outline ring.
• focus:border-blue-500 changes the border color on selection.
• focus:ring-1 adds a thin shadow ring to soften the border transition.

3. Nested Interactions (group-hover)

Sometimes you want to trigger styles on a child element when the user hovers over a parent element (for example, changing a card text color when the user hovers anywhere on the card).

To implement this:

1. Add the group class to the parent container element.
2. Add the group-hover: prefix to the target child elements.

<!-- Parent card container -->
<div className="group border p-6 rounded-lg hover:bg-blue-50 hover:border-blue-200 transition">
  {/* Child heading shifts color on card hover */}
  <h3 className="text-lg font-bold text-gray-900 group-hover:text-blue-700 transition">
    Interactive Card Title
  </h3>
  <p className="text-gray-500 mt-2">Card details go here.</p>
</div>