Hover, Focus, Group and Peer

State variants

State variants apply utilities on pseudo-classes: hover:, focus:, focus-visible: (keyboard focus), active:, disabled:, first:, odd: and more. group on a parent with group-hover: on children styles children when the parent is hovered; peer on a sibling with peer-invalid: styles later siblings based on its state (for example an error message for an invalid input). In v4, hover: only applies on devices that support hover, avoiding sticky hover on touch screens.

A card link and an input with a peer message

group and peer in practice.

<a href="/post" class="group block rounded-xl border p-4 hover:border-cyan-600 focus-visible:outline-2 focus-visible:outline-cyan-600">
  <h3 class="font-semibold group-hover:text-cyan-700">Read the post</h3>
  <span class="text-sm text-gray-500 group-hover:underline">Continue &rarr;</span>
</a>

<label class="block">
  <span class="text-sm font-medium">Email</span>
  <input type="email" required class="peer mt-1 w-full rounded-md border px-3 py-2 invalid:border-red-500">
  <span class="mt-1 hidden text-sm text-red-600 peer-invalid:block">Enter a valid email.</span>
</label>

Always style focus-visible

Removing focus outlines without a replacement makes the site unusable by keyboard.

Quick check: How do you change a child's colour when its parent card is hovered?

• Use dark: on the parent
• Add hover: to the child only
• Use peer on the child
• Add group to the parent and group-hover: to the child