Interactive UIs without custom JS or CSS

In traditional CSS, styling interactive states (like hover, focus, active) requires writing separate selectors: .btn:hover or .btn:focus.

Tailwind allows you to style these states inline using state modifiers (also known as pseudo-class modifiers). You prefix any utility class with the name of the state followed by a colon: hover:bg-teal-500 or focus:ring-2.

1. Common Pseudo-Classes

Here are the most frequently used state modifiers:

Example of a robust form button:

<button class="bg-teal-600 hover:bg-teal-500 active:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed text-white font-semibold py-2 px-4 rounded-lg">
  Submit
</button>

2. Group Styling (Styling children based on parent state)

Sometimes you want to style an element when its parent is hovered or focused. For example, when hovering over a card, you want the card text to change color and an arrow icon to slide to the right.

To do this:

1. Add the group class to the parent container.
2. Add group-hover: or group-focus: to the child element you want to style.

<div class="group p-6 bg-white hover:bg-slate-900 border border-slate-200 rounded-xl transition-all">
  <h3 class="text-slate-900 group-hover:text-white font-bold">New Article</h3>
  <p class="text-slate-500 group-hover:text-slate-300 mt-2">Read our latest publication.</p>
  <span class="inline-block mt-4 text-teal-600 group-hover:translate-x-2 transition-transform">→</span>
</div>

3. Peer Styling (Styling siblings based on sibling state)

When you need to style an element based on the state of a sibling element, use the peer modifier:

1. Add the peer class to the sibling you want to track (e.g., an input field).
2. Add peer-* modifiers (like peer-focus:text-teal-600 or peer-placeholder-shown:opacity-100) to the element you want to style.

The peer element must come before the target element in the HTML structure. Only subsequent siblings can be targeted.

<div class="relative">
  <input id="email" type="text" class="peer p-3 border rounded-lg focus:border-teal-500 focus:outline-none placeholder-transparent" placeholder="Email Address">
  <label for="email" class="absolute left-3 top-3 text-slate-400 transition-all peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-focus:top-[-10px] peer-focus:text-xs peer-focus:text-teal-500 bg-white px-1">
    Email Address
  </label>
</div>

Practice task

In the editor below:

1. Add group to the parent container card (on the wrapper containing the image and text).
2. Use group-hover:scale-110 on the image, and group-hover:text-teal-600 on the heading text Anjali Sharma.
3. Add peer to the input field, and make the help text below it show only when the input is focused using invisible peer-focus:visible.