Pseudo-Class Variants

    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.

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

    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.

    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

    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.   // ...
    3.   variants: {
    4.     borderColor: ['responsive', 'hover', 'focus', 'focus-within'],
    5.   },
    6. }

    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.

    Note that currently only Firefox and Chrome support focus-visible natively, so for sufficient browser support you should install and configure both the 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 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.

    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.

    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

    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.

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

    It’s important to note that you should add any 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. }

    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.

    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.

    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:

    all

    Pseudo-Class Variants - 图21

    sm

    md

    Pseudo-Class Variants - 图23

    lg

    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 .

    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.   ]

    Learn more about writing variant plugins in the .

    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 .