Hover, Focus, & Other States

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 state variant.

Hover, Focus, & Other States - 图1

  1. <form>
  2.   <input class="border border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent ...">
  3.   <button class="bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50 ...">
  4.     Sign up
  5.   </button>
  6. </form>

Not all state 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 state 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.

Hover, Focus, & Other States - 图2

  1. <button class="bg-red-500 hover:bg-red-700 ...">
  2.   Hover me
  3. </button>

By default, the hover variant is enabled for the following core plugins:

  • backgroundColor
  • backgroundOpacity
  • borderColor
  • borderOpacity
  • boxShadow
  • gradientColorStops
  • opacity
  • rotate
  • scale
  • skew
  • textColor
  • textDecoration
  • textOpacity
  • translate

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

  1. // tailwind.config.js
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     extend: {
  6.       padding: ['hover'],
  7.     }
  8.   },
  9. }

Focus

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

Hover, Focus, & Other States - 图3

  1. <input class="focus:ring-2 focus:ring-blue-600 ...">

By default, the focus variant is enabled for the following core plugins:

  • accessibility
  • backgroundColor
  • backgroundOpacity
  • borderColor
  • borderOpacity
  • boxShadow
  • gradientColorStops
  • opacity
  • outline
  • placeholderColor
  • placeholderOpacity
  • ringColor
  • ringOffsetColor
  • ringOffsetWidth
  • ringOpacity
  • ringWidth
  • rotate
  • scale
  • skew
  • textColor
  • textDecoration
  • textOpacity
  • translate
  • zIndex

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

  1. // tailwind.config.js
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     extend: {
  6.       maxHeight: ['focus'],
  7.     }
  8.   },
  9. }

Active

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

Hover, Focus, & Other States - 图4

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

By default, the active variant is not enabled for any core plugins.

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

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

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.

Hover, Focus, & Other States - 图5

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

By default, the group-hover variant is enabled for the following core plugins:

  • backgroundColor
  • backgroundOpacity
  • borderColor
  • borderOpacity
  • boxShadow
  • opacity
  • textColor
  • textDecoration
  • textOpacity

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

  1. // tailwind.config.js
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     extend: {
  6.       divideColor: ['group-hover'],
  7.     }
  8.   },
  9. }

Group-focus

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

Hover, Focus, & Other States - 图6

  1. <button class="group bg-yellow-500 focus:bg-yellow-600 ...">
  2.   <svg class="text-white group-focus:text-yellow-300 ..."></svg>
  3.   Bookmark
  4. </button>

By default, the group-focus variant is not enabled for any core plugins.

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

  1. // tailwind.config.js
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     extend: {
  6.       backgroundColor: ['group-focus'],
  7.     }
  8.   },
  9. }

Focus-within

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

Hover, Focus, & Other States - 图7

  1. <form>
  2.   <div class="text-gray-400 focus-within:text-gray-600 ...">
  3.     <div class="...">
  4.       <svg fill="currentColor"></svg>
  5.     </div>
  6.     <input class="focus:ring-2 focus:ring-gray-300 ...">
  7.   </div>
  8. </form>

By default, the focus-within variant is enabled for the following core plugins:

  • accessibility
  • backgroundColor
  • backgroundOpacity
  • borderColor
  • borderOpacity
  • boxShadow
  • opacity
  • outline
  • ringColor
  • ringOffsetColor
  • ringOffsetWidth
  • ringOpacity
  • ringWidth
  • textColor
  • textDecoration
  • textOpacity
  • zIndex

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

  1. // tailwind.config.js
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     extend: {
  6.       scale: ['focus-within'],
  7.     }
  8.   },
  9. }

Focus-visible

Hover, Focus, & Other States - 图8

Note that focus-visible currently requires JS and PostCSS polyfills 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.

Hover, Focus, & Other States - 图9

  1. <button class="focus:ring-2 focus:ring-red-500 ...">
  2.   Ring on focus
  3. </button>
  4. <button class="focus-visible:ring-2 focus-visible:ring-rose-500 ...">
  5.   Ring on focus-visible
  6. </button>

Note that currently only Chrome, Edge, and Firefox 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. }

By default, the focus-visible variant is not enabled for any core plugins.

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

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

Motion-safe

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.

Hover, Focus, & Other States - 图10

  1. <button class="transform motion-safe:hover:scale-110 ...">
  2.   Hover me
  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>

By default, the motion-safe variant is not enabled for any core plugins.

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

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

Motion-reduce

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.

Hover, Focus, & Other States - 图11

  1. <button class="transform hover:scale-110 motion-reduce:transform-none ...">
  2.   Hover me
  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>

By default, the motion-reduce variant is not enabled for any core plugins.

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

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

Disabled

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

Hover, Focus, & Other States - 图12

  1. <button class="disabled:opacity-50 ...">
  2.   Submit
  3. </button>
  4. <button class="disabled:opacity-50 ..." disabled>
  5.   Submit
  6. </button>

By default, the disabled variant is not enabled for any core plugins.

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

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

Visited

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

Hover, Focus, & Other States - 图13

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

By default, the visited variant is not enabled for any core plugins.

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

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

Checked

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

Hover, Focus, & Other States - 图14

  1. <input type="checkbox" class="appearance-none checked:bg-blue-600 checked:border-transparent ...">

By default, the checked variant is not enabled for any core plugins.

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

  1. // tailwind.config.js
  2. module.exports = {
  3.   // ...
  4.   variants: {
  5.     extend: {
  6.       backgroundColor: ['checked'],
  7.       borderColor: ['checked'],
  8.     }
  9.   },
  10. }

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.

Hover, Focus, & Other States - 图15

  1. <div class="...">
  2.   <div v-for="item in items" class="transform first:rotate-45 ...">
  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.

By default, the first-child variant is not enabled for any core plugins.

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

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

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.

Hover, Focus, & Other States - 图16

  1. <div class="...">
  2.   <div v-for="item in items" class="transform last:rotate-45 ...">
  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.

By default, the last-child variant is not enabled for any core plugins.

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

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

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.

Hover, Focus, & Other States - 图17

  1. <div class="...">
  2.   <div v-for="item in items" class="transform odd:rotate-45 ...">
  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.

By default, the odd-child variant is not enabled for any core plugins.

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

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

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.

Hover, Focus, & Other States - 图18

  1. <div class="...">
  2.   <div v-for="item in items" class="transform even:rotate-45 ...">
  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.

By default, the even-child variant is not enabled for any core plugins.

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

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

Combining with responsive prefixes

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

To apply a state variant at a specific breakpoint, add the responsive prefix first, before the state prefix:

  1. <button class="... hover:bg-green-500 sm:hover:bg-blue-500">
  2.   <!-- ... -->
  3. </button>

Generating variants for custom utilities

You can generate state variants for your own custom CSS classes by wrapping them with the @variants directive:

  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 states Tailwind doesn’t support by default by writing a custom variant plugin.

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

←Responsive Design   Dark Mode→