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.

Pseudo-Class Variants - 图1

  1. <form>
  2.   <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 ...">
  3.   <button class="bg-teal-500 hover:bg-teal-600 focus:outline-none focus:shadow-outline ...">
  4.     Sign Up
  5.   </button>
  6. </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.

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.

Pseudo-Class Variants - 图2

  1. <button class="bg-transparent hover:bg-blue-500 text-blue-700 hover:text-white...">
  2.   Hover me
  3. </button>

You can control whether hover variants are enabled for a utility in the variants section of your tailwind.config.js file:

  1. // tailwind.config.js
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     backgroundColor: ['responsive', 'hover', 'focus'],
  6.   },
  7. }

Focus

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

Pseudo-Class Variants - 图3

  1. <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:

  1. // tailwind.config.js
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     backgroundColor: ['responsive', 'hover', 'focus'],
  6.   },
  7. }

Active

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

Pseudo-Class Variants - 图4

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

You can control whether active variants are enabled for a utility in the variants section of your tailwind.config.js file:

  1. // tailwind.config.js
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     backgroundColor: ['responsive', 'hover', 'focus', 'active'],
  6.   },
  7. }

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.

Pseudo-Class Variants - 图5

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

You can control whether group-hover variants are enabled for a utility in the variants section of your tailwind.config.js file:

  1. // tailwind.config.js
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     textColor: ['responsive', 'hover', 'focus', 'group-hover'],
  6.   },
  7. }

Group-focusv1.3.0+

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

Pseudo-Class Variants - 图6

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

You can control whether group-focus variants are enabled for a utility in the variants section of your tailwind.config.js file:

  1. // tailwind.config.js
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     textColor: ['responsive', 'hover', 'focus', 'group-focus'],
  6.   },
  7. }

Focus-within

Pseudo-Class Variants - 图7

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

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

Pseudo-Class Variants - 图8

  1. <form class="border-b-2 border-gray-400 focus-within:border-teal-500 ...">
  2.   <input class="..." placeholder="Jane Doe" ...>
  3.   <button class="...">
  4.     Sign Up
  5.   </button>
  6. </form>

You can control whether focus-within variants are enabled for a utility in the variants section of your tailwind.config.js file:

  1. // tailwind.config.js
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     borderColor: ['responsive', 'hover', 'focus', 'focus-within'],
  6.   },
  7. }

Focus-visiblev1.5.0+

Pseudo-Class Variants - 图9

Note that focus-visible currently requires a polyfill for sufficient browser support.

Add the focus-visible: prefix to only apply a utility when an element has focus but only if the user is using the keyboard.

Pseudo-Class Variants - 图10

  1. <ul class="flex space-x-8">
  2.   <li>
  3.     <a class="focus:outline-none focus:underline ..." href="#">
  4.       Underlined on focus
  5.     </a>
  6.   </li>
  7.   <li>
  8.     <a class="focus:outline-none focus-visible:underline ..." href="#">
  9.       Underlined on focus-visible
  10.     </a>
  11.   </li>
  12. </ul>

Note that currently only Firefox and Chrome support focus-visible natively, so for sufficient browser support you should install and configure both the focus-visible JS polyfill and the focus-visible PostCSS polyfill. Make sure to include the PostCSS plugin after Tailwind in your list of PostCSS plugins:

  1. // postcss.config.js
  2. module.exports = {
  3.   plugins: {
  4.     tailwindcss: {},
  5.     'postcss-focus-visible': {},
  6.     autoprefixer: {}
  7.   }
  8. }

You can control whether focus-visible variants are enabled for a utility in the variants section of your tailwind.config.js file:

  1. // tailwind.config.js
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     textDecoration: ['responsive', 'hover', 'focus', 'focus-visible'],
  6.   },
  7. }

Motion-safev1.6.0+

Add the motion-safe: prefix to only apply a utility when the prefers-reduced-motion media feature matches no-preference.

For example, this button will only animate on hover if the user hasn’t enabled “Reduce motion” on their system.

Pseudo-Class Variants - 图11

  1. <button class="transform motion-safe:hover:-translate-y-1 motion-safe:hover:scale-110 transition ease-in-out duration-300 ...">
  2.   Hover
  3. </button>

Note that unlike most other variants, motion-safe can be combined with both responsive variants and other variants like hover, by stacking them in this order:

  1. <div class="sm:motion-safe:hover:animate-spin">
  2.   <!-- ... -->
  3. </div>

You can control whether motion-safe variants are enabled for a utility in the variants section of your tailwind.config.js file:

  1. // tailwind.config.js
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     translate: ['responsive', 'hover', 'focus', 'motion-safe'],
  6.   },
  7. }

Motion-reducev1.6.0+

Add the motion-reduce: prefix to only apply a utility when the prefers-reduced-motion media feature matches reduce.

For example, this button will animate on hover by default, but the animations will be disabled if the user has enabled “Reduce motion” on their system.

Pseudo-Class Variants - 图12

  1. <button class="transform motion-reduce:transform-none hover:-translate-y-1 hover:scale-110 transition ease-in-out duration-300 ...">
  2.   Hover
  3. </button>

Note that unlike most other variants, motion-reduce can be combined with both responsive variants and other variants like hover, by stacking them in this order:

  1. <div class="sm:motion-reduce:hover:animate-none">
  2.   <!-- ... -->
  3. </div>

You can control whether motion-reduce variants are enabled for a utility in the variants section of your tailwind.config.js file:

  1. // tailwind.config.js
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     translate: ['responsive', 'hover', 'focus', 'motion-reduce'],
  6.   },
  7. }

Disabledv1.1.0+

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

Pseudo-Class Variants - 图13

  1. <button class="disabled:opacity-75 bg-blue-500...">
  2.   Submit
  3. </button>
  5. <button disabled class="disabled:opacity-75 bg-blue-500...">
  6.   Submit
  7. </button>

You can control whether disabled variants are enabled for a utility in the variants section of your tailwind.config.js file:

  1. // tailwind.config.js
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     opacity: ['responsive', 'hover', 'focus', 'disabled'],
  6.   },
  7. }

Visitedv1.1.0+

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

Pseudo-Class Variants - 图14

  1. <a href="#" class="text-blue-600 visited:text-purple-600 ...">Link</a>

You can control whether visited variants are enabled for a utility in the variants section of your tailwind.config.js file:

  1. // tailwind.config.js
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     textColor: ['responsive', 'hover', 'focus', 'visited'],
  6.   },
  7. }

Checkedv1.5.0+

Add the checked: prefix to only apply a utility when a radio or checkbox is currently checked.

Pseudo-Class Variants - 图15

  1. <input type="radio" class="appearance-none checked:bg-gray-900 checked:border-transparent ...">

You can control whether checked variants are enabled for a utility in the variants section of your tailwind.config.js file:

  1. // tailwind.config.js
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     backgroundColor: ['responsive', 'hover', 'focus', 'checked'],
  6.   },
  7. }

First-childv1.1.0+

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.

Pseudo-Class Variants - 图16

  1. <div class="border rounded">
  2.   <div v-for="item in items" class="border-t first:border-t-0">
  3.     {{ item }}
  4.   </div>
  5. </div>

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

You can control whether first variants are enabled for a utility in the variants section of your tailwind.config.js file:

  1. // tailwind.config.js
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     borderWidth: ['responsive', 'first', 'hover', 'focus'],
  6.   },
  7. }

Last-childv1.1.0+

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.

Pseudo-Class Variants - 图17

  1. <div class="border rounded">
  2.   <div v-for="item in items" class="border-b last:border-b-0">
  3.     {{ item }}
  4.   </div>
  5. </div>

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

You can control whether last variants are enabled for a utility in the variants section of your tailwind.config.js file:

  1. // tailwind.config.js
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     borderWidth: ['responsive', 'last', 'hover', 'focus'],
  6.   },
  7. }

Odd-childv1.1.0+

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.

Pseudo-Class Variants - 图18

  1. <div class="border rounded">
  2.   <div v-for="item in items" class="bg-white odd:bg-gray-200">
  3.     {{ item }}
  4.   </div>
  5. </div>

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

You can control whether odd variants are enabled for a utility in the variants section of your tailwind.config.js file:

  1. // tailwind.config.js
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     backgroundColor: ['responsive', 'odd', 'hover', 'focus'],
  6.   },
  7. }

Even-childv1.1.0+

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.

Pseudo-Class Variants - 图19

  1. <div class="border rounded">
  2.   <div v-for="item in items" class="bg-white even:bg-gray-200">
  3.     {{ item }}
  4.   </div>
  5. </div>

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

You can control whether even variants are enabled for a utility in the variants section of your tailwind.config.js file:

  1. // tailwind.config.js
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     backgroundColor: ['responsive', 'even', 'hover', 'focus'],
  6.   },
  7. }

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:

Pseudo-Class Variants - 图20

all

Pseudo-Class Variants - 图21

sm

Pseudo-Class Variants - 图22

md

Pseudo-Class Variants - 图23

lg

Pseudo-Class Variants - 图24

xl

  1. <div 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"></div>

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:

  1. /* Input: */
  2. @variants group-hover, hover, focus {
  3.   .banana {
  4.     color: yellow;
  5.   }
  6. }
  8. /* Output: */
  9. .banana {
  10.   color: yellow;
  11. }
  12. .group:hover .group-hover\:banana {
  13.   color: yellow;
  14. }
  15. .hover\:banana:hover {
  16.   color: yellow;
  17. }
  18. .focus\:banana:focus {
  19.   color: yellow;
  20. }

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:

  1. // tailwind.config.js
  2. const plugin = require('tailwindcss/plugin')
  4. module.exports = {
  5.   plugins: [
  6.     plugin(function({ addVariant, e }) {
  7.       addVariant('disabled', ({ modifySelectors, separator }) => {
  8.         modifySelectors(({ className }) => {
  9.           return `.${e(`disabled${separator}${className}`)}:disabled`
  10.         })
  11.       })
  12.     })
  13.   ]
  14. }

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

Default variants reference

Due to file-size considerations, Tailwind does not include all variants for all utilities by default.

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

  1. // Default configuration
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     accessibility: ['responsive', 'focus'],
  6.     alignContent: ['responsive'],
  7.     alignItems: ['responsive'],
  8.     alignSelf: ['responsive'],
  9.     appearance: ['responsive'],
  10.     backgroundAttachment: ['responsive'],
  11.     backgroundClip: ['responsive'],
  12.     backgroundColor: ['responsive', 'hover', 'focus'],
  13.     backgroundImage: ['responsive'],
  14.     gradientColorStops: ['responsive', 'hover', 'focus'],
  15.     backgroundOpacity: ['responsive', 'hover', 'focus'],
  16.     backgroundPosition: ['responsive'],
  17.     backgroundRepeat: ['responsive'],
  18.     backgroundSize: ['responsive'],
  19.     borderCollapse: ['responsive'],
  20.     borderColor: ['responsive', 'hover', 'focus'],
  21.     borderOpacity: ['responsive', 'hover', 'focus'],
  22.     borderRadius: ['responsive'],
  23.     borderStyle: ['responsive'],
  24.     borderWidth: ['responsive'],
  25.     boxShadow: ['responsive', 'hover', 'focus'],
  26.     boxSizing: ['responsive'],
  27.     container: ['responsive'],
  28.     cursor: ['responsive'],
  29.     display: ['responsive'],
  30.     divideColor: ['responsive'],
  31.     divideOpacity: ['responsive'],
  32.     divideStyle: ['responsive'],
  33.     divideWidth: ['responsive'],
  34.     fill: ['responsive'],
  35.     flex: ['responsive'],
  36.     flexDirection: ['responsive'],
  37.     flexGrow: ['responsive'],
  38.     flexShrink: ['responsive'],
  39.     flexWrap: ['responsive'],
  40.     float: ['responsive'],
  41.     clear: ['responsive'],
  42.     fontFamily: ['responsive'],
  43.     fontSize: ['responsive'],
  44.     fontSmoothing: ['responsive'],
  45.     fontVariantNumeric: ['responsive'],
  46.     fontStyle: ['responsive'],
  47.     fontWeight: ['responsive', 'hover', 'focus'],
  48.     height: ['responsive'],
  49.     inset: ['responsive'],
  50.     justifyContent: ['responsive'],
  51.     justifyItems: ['responsive'],
  52.     justifySelf: ['responsive'],
  53.     letterSpacing: ['responsive'],
  54.     lineHeight: ['responsive'],
  55.     listStylePosition: ['responsive'],
  56.     listStyleType: ['responsive'],
  57.     margin: ['responsive'],
  58.     maxHeight: ['responsive'],
  59.     maxWidth: ['responsive'],
  60.     minHeight: ['responsive'],
  61.     minWidth: ['responsive'],
  62.     objectFit: ['responsive'],
  63.     objectPosition: ['responsive'],
  64.     opacity: ['responsive', 'hover', 'focus'],
  65.     order: ['responsive'],
  66.     outline: ['responsive', 'focus'],
  67.     overflow: ['responsive'],
  68.     overscrollBehavior: ['responsive'],
  69.     padding: ['responsive'],
  70.     placeContent: ['responsive'],
  71.     placeItems: ['responsive'],
  72.     placeSelf: ['responsive'],
  73.     placeholderColor: ['responsive', 'focus'],
  74.     placeholderOpacity: ['responsive', 'focus'],
  75.     pointerEvents: ['responsive'],
  76.     position: ['responsive'],
  77.     resize: ['responsive'],
  78.     space: ['responsive'],
  79.     stroke: ['responsive'],
  80.     strokeWidth: ['responsive'],
  81.     tableLayout: ['responsive'],
  82.     textAlign: ['responsive'],
  83.     textColor: ['responsive', 'hover', 'focus'],
  84.     textOpacity: ['responsive', 'hover', 'focus'],
  85.     textDecoration: ['responsive', 'hover', 'focus'],
  86.     textTransform: ['responsive'],
  87.     userSelect: ['responsive'],
  88.     verticalAlign: ['responsive'],
  89.     visibility: ['responsive'],
  90.     whitespace: ['responsive'],
  91.     width: ['responsive'],
  92.     wordBreak: ['responsive'],
  93.     zIndex: ['responsive'],
  94.     gap: ['responsive'],
  95.     gridAutoFlow: ['responsive'],
  96.     gridTemplateColumns: ['responsive'],
  97.     gridAutoColumns: ['responsive'],
  98.     gridColumn: ['responsive'],
  99.     gridColumnStart: ['responsive'],
  100.     gridColumnEnd: ['responsive'],
  101.     gridTemplateRows: ['responsive'],
  102.     gridAutoRows: ['responsive'],
  103.     gridRow: ['responsive'],
  104.     gridRowStart: ['responsive'],
  105.     gridRowEnd: ['responsive'],
  106.     transform: ['responsive'],
  107.     transformOrigin: ['responsive'],
  108.     scale: ['responsive', 'hover', 'focus'],
  109.     rotate: ['responsive', 'hover', 'focus'],
  110.     translate: ['responsive', 'hover', 'focus'],
  111.     skew: ['responsive', 'hover', 'focus'],
  112.     transitionProperty: ['responsive'],
  113.     transitionTimingFunction: ['responsive'],
  114.     transitionDuration: ['responsive'],
  115.     transitionDelay: ['responsive'],
  116.     animation: ['responsive']
  117.   }
  118. }

← Responsive Design   Adding Base Styles →