Handling Hover, Focus, and Other States

Hover, focus, and active

Style elements on hover, focus, and active using the hover, focus, and active modifiers:

<button class="bg-violet-500 hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 ...">
  Save changes
</button>

With the pseudo-classes first, last, odd, selector, and even is the same, for example:

<li class="flex py-4 first:pt-0 last:pb-0">

<!-- Use a white background for odd rows, and slate-50 for even rows -->
<tr class="odd:bg-white even:bg-slate-50">

<!-- Style the active text selection using the selection modifier -->
<div class="selection:bg-fuchsia-300 selection:text-fuchsia-900">
  <p>
    So I started to walk into the water. I won't lie to you boys, I was
    terrified.
  </p>
</div>

We’ve designed the selection modifier to be inheritable, so you can add it anywhere in the tree and it will be applied to all descendant elements.

Styling based on parent state (group-{modifier})

When you need to style an element based on the state of some parent element, mark the parent with the group class, and use group-* modifiers like group-hover to style the target element:

<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
  <div class="flex items-center space-x-3">
    <svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
    <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">New project</h3>
  </div>
  <p class="text-slate-500 group-hover:text-white text-sm">Create a new project from a variety of starting templates.</p>
</a>

Arbitrary groups

You can create one-off group-* modifiers on the fly by providing your own selector as an arbitrary value between square brackets:

<div class="group is-published">
  <div class="hidden group-[.is-published]:block">
    Published
  </div>
</div>

Styling based on sibling state (peer-{modifier})

When you need to style an element based on the state of a sibling element, mark the sibling with the peer class, and use peer-* modifiers like peer-invalid to style the target element:

<label class="block">
  <span class="block text-sm font-medium text-slate-700">Email</span>
  <input type="email" class="peer ..."/>
  <p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
    Please provide a valid email address.
  </p>
</label>

It’s important to note that the peer marker can only be used on previous siblings because of how the general sibling combinator works in CSS.

Differentiating peers

When using multiple peers, you can style something on the state of a specific peer by giving that peer a unique name using a peer/{name} class, and including that name in modifiers using classes like peer-checked/{name}:

<fieldset>
  <legend>Published status</legend>

  <input id="draft" class="peer/draft" type="radio" name="status" checked />
  <label for="draft" class="peer-checked/draft:text-sky-500">Draft</label>

  <input id="published" class="peer/published" type="radio" name="status" />
  <label for="published" class="peer-checked/published:text-sky-500">Published</label>

  <div class="hidden peer-checked/draft:block">Drafts are only visible to administrators.</div>
  <div class="hidden peer-checked/published:block">Your post will be publicly visible on your site.</div>
</fieldset>