Pseudo-Class Variants

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

Overview

Similar to how Tailwind handles responsive design, 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-teal-500 hover:bg-teal-600 focus:outline-none focus:shadow-outline ...">
    Sign Up
  </button>
</form>

Not all pseudo-class variants are enabled for all utilities by default due to file-size considerations, but we've tried our best to enable the most commonly used combinations out of the box.

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

Using pseudo-class variants

Tailwind includes first-class support for styling elements on hover, focus, active, group-hover, and focus-within. If you need to target a pseudo-class that Tailwind doesn't support, you can extend the supported variants by writing a variant plugin.

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 control whether hover variants are enabled for a utility 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 control whether focus variants are enabled for a utility 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 control whether active variants are enabled for a utility 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.

<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 control whether group-hover variants are enabled for a utility 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 control whether focus-within variants are enabled for a utility in the variants section of your tailwind.config.js file:

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

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:

all

sm

md

lg

xl

<button class="bg-orange-500 hover:bg-orange-600 sm:bg-green-500 sm:hover:bg-green-600 md:bg-red-500 md:hover:bg-red-600 lg:bg-indigo-500 lg:hover:bg-indigo-600 xl:bg-pink-500 xl:hover:bg-pink-600 ">
  Button
</button>

Generative variants for custom utilities

You can generate pseudo-class variants for your own custom utilities by wrapping them with the @variants directive in your CSS:

/* 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.

Creating custom variants

You can create your own variants for any pseudo-classes Tailwind doesn't include by default by writing a custom variant plugin.

For example, this simple plugin adds support for the disabled pseudo-class variant:

// tailwind.config.js
module.exports = {
  plugins: [
    function({ addVariant, e }) {
      addVariant('disabled', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`disabled${separator}${className}`)}:disabled`
        })
      })
    }
  ]
}

Learn more about writing variant plugins in the variant plugin documentation.

Default variants reference

Due to file-size considerations, Tailwind does not generate active, group-hover, or focus-within variants for any utilities by default.

To configure which variants are enabled for your project, see the configuring variants documentation.