Hover, Focus, & Other States

# Overview

Similar to how Elements handles , styling elements on hover, focus, and more can be accomplished by prefixing utilities with the appropriate pseudo-class.

<form>
  <input class="bg-gray-200 hover:bg-white hover:border-gray-300 focus:outline-none focus:bg-white focus:shadow-outline focus:border-gray-300 ...">
  <button class="bg-primary hover:bg-primary-dark focus:outline-none focus:shadow-outline ...">
    Sign Up
  </button>
</form>

For a complete list of which variants are enabled by default, see the reference table at the end of this page.

Elements includes first-class support for styling elements on hover, focus, active, disabled, visited, first-child, last-child, odd-child, even-child, group-hover, group-focus, and focus-within.

If you need to target a pseudo-class that Elements doesn’t support, you can extend the supported variants by writing a custom variants or you can make a request for variant support to be added in a future release.

# Hover

Add the hover: prefix to only apply a utility on hover.

<button class="bg-transparent hover:bg-primary text-primary hover:text-white...">
  Hover me
</button>

# Focus

Add the focus: prefix to only apply a utility on focus.

<input class="bg-gray-200 focus:bg-white border-transparent focus:border-info ..." placeholder="Focus me">

# Active

Add the active: prefix to only apply a utility when an element is active.

<button class="bg-primary active:bg-primary-dark text-white...">
  Click me
</button>

# Disabled

Add the disabled: prefix to only apply a utility when an element is disabled.

<button class="disabled:opacity-75 bg-primary...">
  Submit
</button>

<button disabled class="disabled:opacity-75 bg-primary...">
  Submit
</button>

# Visited

Add the visited: prefix to only apply a utility when a link has been visited.

<a href="#" class="text-blue-500 visited:text-violet-500 ...">Link</a>

# First-child

Add the first: prefix to only apply a utility when it is the first-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

<div class="border rounded">
  <div v-for="item in items" class="border-t first:border-t-0">
    @{{item}}
  </div>
</div>

It’s important to note that you should add any first: utilities to the child element, not the parent element.

# Last-child

Add the last: prefix to only apply a utility when it is the last-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

<div class="border rounded">
  <div v-for="item in items" class="border-b last:border-b-0">
    @{{item}}
  </div>
</div>

It’s important to note that you should add any last: utilities to the child element, not the parent element.

# Odd-child

Add the odd: prefix to only apply a utility when it is an odd-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

<div class="border rounded">
  <div v-for="item in items" class="bg-white odd:bg-gray-200">
    @{{item}}
  </div>
</div>

It’s important to note that you should add any odd: utilities to the child element, not the parent element.

# Even-child

Add the even: prefix to only apply a utility when it is an even-child of its parent. This is mostly useful when elements are being generated in some kind of loop.

<div class="border rounded">
  <div v-for="item in items" class="bg-white even:bg-gray-200">
    @{{item}}
  </div>
</div>

It’s important to note that you should add any even: utilities to the child element, not the parent element.

# Group-hover

If you need to style a child element when hovering over a specific parent element, add the .group class to the parent element and add the group-hover: prefix to the utility on the child element.

<div class="group bg-white hover:bg-primary ...">
  <p class="text-gray-900 group-hover:text-white ...">New Project</p>
  <p class="text-gray-700 group-hover:text-white ...">Create a new project from a variety of starting templates.</p>
</div>

# Group-focus

The group-focus variant works just like group-hover except for focus:

<button class="group text-gray-700 focus:text-gray-900 ...">
  <svg class="h-6 w-6 text-gray-400 group-focus:text-gray-400"><!-- ... --></svg>
  Submit
</button>

# Focus-within

Add the focus-within: prefix to only apply a utility when a child element has focus.

<form class="border-b-2 border-gray-400 focus-within:border-primary ...">
  <input class="..." placeholder="Jane Doe" ...>
  <button class="...">
    Sign Up
  </button>
</form>

# Combining with responsive prefixes

Pseudo-class variants are also responsive, meaning you can do things like change an element’s hover style at different breakpoints for example.

To apply a pseudo-class variant at a specific breakpoint, add the responsive prefix first, before the pseudo-class prefix:

<button class="squash-md rounded text-white font-medium none:bg-orange-400 none:hover:bg-orange-500 sm:bg-green-400 sm:hover:bg-green-500 md:bg-red-400 md:hover:bg-red-500 lg:bg-violet-400 lg:hover:bg-violet-500 xl:bg-pink-400 xl:hover:bg-pink-500 ">
  Button
</button>

# Reference Table