State Variants

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

Work in progress!

More detailed documentation is coming soon, but in the meantime here's a quick class reference.

To Document:

  • Add reference table with all of the default variant configuration
  • Briefly document responsive variants again, linking to responsive design docs?

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-500 text-blue-700 hover:text-white...">
  Hover me
</button>

You can enable hover variants for a core utility plugin in the variants section of your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    backgroundColor: ['hover'],
  },
}

Focus

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

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

You can enable focus variants for a core utility plugin in the variants section of your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    backgroundColor: ['focus'],
  },
}

Active

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

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

You can enable active variants for a core utility plugin in the variants section of your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    backgroundColor: ['active'],
  },
}

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-500 ...">
  <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>

You can enable group-hover variants for a core utility plugin in the variants section of your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    backgroundColor: ['group-hover'],
  },
}

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-gray-400 focus-within:border-teal-500 ...">
  <input class="..." placeholder="Jane Doe" ...>
  <button class="...">
    Sign Up
  </button>
</form>

You can enable focus-within variants for a core utility plugin in the variants section of your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    backgroundColor: ['focus-within'],
  },
}

Combining with 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-500 md:hover:bg-red-500 ...">Button</button>

Custom Utilities

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

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

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

For more information, see the @variants directive documentation.