# Hover, Focus, Group and Peer — Tailwind CSS

Source: https://www.skillbyai.com/en/tailwind/v-states

> Style interaction states.

## 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.

```html
<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.

**Quiz:** 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
- [x] Add group to the parent and group-hover: to the child

*Answer:* Add group to the parent and group-hover: to the child. group links parent state to children.