State Variants

Using utilities to style elements on hover, focus, and more.

Similar to our responsive prefixes, Tailwind makes it easy to style elements on hover, focus, and more using state prefixes.

Hover

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

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

By default, hover variants are only generated for background color, border color, font weight, shadow, text color, and text style utilities.

You can customize this in the modules section of your configuration file.

Focus

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

<input class="bg-grey-lighter focus:bg-white border-transparent focus:border-blue-light ..." placeholder="Focus me">

By default, focus variants are only generated for background color, border color, font weight, outline, shadow, text color, and text style utilities.

You can customize this in the modules section of your configuration file.

Active

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

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

By default, active variants are not generated for any utilities.

You can customize this in the modules section of your configuration file.

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.

New Project

Create a new project from a variety of starting templates.

<div class="group bg-white hover:bg-blue ...">
  <p class="text-black group-hover:text-white ...">New Project</p>
  <p class="text-grey-darker group-hover:text-white ...">Create a new project from a variety of starting templates.</p>
</div>

By default, group hover variants are not generated for any utilities.

You can customize this in the modules section of your configuration file.

Focus-Within

Note that focus-within is not supported in IE or Edge.

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

<form class="border-b-2 border-grey-light focus-within:border-teal ...">
  <input class="..." placeholder="Jane Doe" ...>
  <button class="...">
    Sign Up
  </button>
</form>

By default, focus-within variants are not generated for any utilities.

You can customize this in the modules section of your configuration file.

Responsive Prefixes

State variants are also responsive, meaning you can change an element's hover style for example at different breakpoints.

To apply a state variant responsively, add the responsive prefix first, before the state prefix.

<button class="... md:bg-orange md:hover:bg-red ...">Button</button>

Custom Utilities

You can generate state variants for your own custom utilities using the @variants directive:

// Input:
@variants hover, focus {
  .banana {
    color: yellow;
  }
}

// Output:
.banana {
  color: yellow;
}
.focus\:banana:focus {
  color: yellow;
}
.hover\:banana:hover {
  color: yellow;
}

For more information, see the @variants directive documentation.