悬停、焦点和其它状态

概述

与 Tailwind 如何处理响应式设计类似，通过为功能类添加适当的状态变体前缀，可以对处于 hover 、focus 和其它状态的元素设置样式。

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

出于文件大小的考虑，默认情况下并非对所有的功能类都启用了状态变体，但我们尽力启用了最常用的组合。

查看默认启用了哪些变体的列表，查看本页末尾的参考表。

如果您需要启用一个 Tailwind 未支持的状态，可以通过编写变体插件来扩展支持的变体。

Hover

添加 hover: 前缀，以在 hover 状态时应用一个功能类。

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

默认情况下，以下核心插件启用了该 hover 变体：

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

您可以在 tailwind.config.js 文件中的 variants 部分控制是否为某个插件启用 hover 变体：

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

Focus

添加 focus: 前缀，以在 focus 状态时应用一个功能类。

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

默认情况下，以下核心插件启用了该 focus 变体：

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

您可以在 tailwind.config.js 文件中的 variants 部分控制是否为某个插件启用 focus 变体：

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

Active

添加 active: 前缀，以在元素处于 active 状态时应用某个功能。

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

默认情况下，所有核心插件都没有启用该 active 变体。

您可以在 tailwind.config.js 文件中的 variants 部分控制是否为某个插件启用 active 变体：

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

Group-hover

如果您需要当鼠标悬停在一个指定的父元素上时对其子元素设置样式，给父元素添加 group 类，并且为子元素的功能类添加 group-hover: 前缀。

New Project

Create a new project from a variety of starting templates.

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

默认情况下，以下核心插件启用了该 group-hover 变体：

backgroundColor
backgroundOpacity
borderColor
borderOpacity
boxShadow
opacity
textColor
textDecoration
textOpacity

您可以在 tailwind.config.js 文件中的 variants 部分控制是否为某个插件启用 group-hover 变体：

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

Group-focus

除了 focus，group-focus 变体的工作方式与 group-hover 一样。

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

默认情况下，所有核心插件都没有启用该 group-focus 变体。

您可以在 tailwind.config.js 文件中的 variants 部分控制是否为某个插件启用 group-focus 变体：

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

Focus-within

添加 focus-within: 前缀，以便仅在一个子元素获得焦点时才应用功能类。

<form>
  <div class="text-gray-400 focus-within:text-gray-600 ...">
    <div class="...">
      <svg fill="currentColor"></svg>
    </div>
    <input class="focus:ring-2 focus:ring-gray-300 ...">
  </div>
</form>

默认情况下，以下核心插件启用了该 focus-within 变体：

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

您可以在 tailwind.config.js 文件中的 variants 部分控制是否为某个插件启用 focus-within 变体：

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

Focus-visible

请注意，focus-visible 当前需要 JS 和 PostCSS polyfills 来提供足够的浏览器支持。

添加 focus-visible: 前缀，以便当一个元素具有焦点且仅在用户使用键盘时才应用功能类。

<button class="focus:ring-2 focus:ring-red-500 ...">
  Ring on focus
</button>
<button class="focus-visible:ring-2 focus-visible:ring-rose-500 ...">
  Ring on focus-visible
</button>

注意：目前仅 Chrome, Edge, and Firefox 原生支持 focus-visible，因此，为了获得足够的浏览器支持，您应该安装并配置 focus-visible JS polyfill 和 focus-visible PostCSS polyfill，并确保该插件在 PostCSS 插件列表中位于 Tailwind 之后。

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    'postcss-focus-visible': {},
    autoprefixer: {}
  }
}

默认情况下，所有核心插件都没有启用该 focus-visible 变体。

您可以在 tailwind.config.js 文件中的 variants 部分控制是否为某个插件启用 focus-visible 变体：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      textDecoration: ['focus-visible'],
    }
  },
}

Motion-safe

添加 motion-safe: 前缀以便仅在 prefers-reduced-motion 匹配 no-preference 时应用功能类。

例如：如果用户未在系统中开启 "Reduce motion"，则此按钮仅在鼠标悬停时发生动画效果。

<button class="transform motion-safe:hover:scale-110 ...">
  Hover me
</button>

注意：不像其它大多数变体，motion-safe 在按以下顺序排列时可以与响应式变体和其它变体（如 hover）结合使用。

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

默认情况下，所有核心插件都没有启用该 motion-safe 变体。

您可以在 tailwind.config.js 文件中的 variants 部分控制是否为某个插件启用 motion-safe 变体：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      translate: ['motion-safe'],
    }
  },
}

Motion-reduce

添加 motion-reduce: 前缀以便仅在 prefers-reduced-motion 匹配 reduce 时应用功能类。

例如，默认情况下，此按钮将在鼠标悬停时产生动画，但是如果用户在系统中开启了 "Reduce motion"，则动画将被禁用。

<button class="transform hover:scale-110 motion-reduce:transform-none ...">
  Hover me
</button>

注意：不像其它大多数变体，motion-reduce 在按以下顺序排列时可以与响应式变体和其它变体（如 hover）结合使用。

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

默认情况下，所有核心插件都没有启用该 motion-reduce 变体。

您可以在 tailwind.config.js 文件中的 variants 部分控制是否为某个插件启用 motion-reduce 变体：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      translate: ['motion-reduce'],
    }
  },
}

Disabled

添加 disabled: 前缀，以便当一个元素被禁用时才应用功能类。

<button class="disabled:opacity-50 ...">
  Submit
</button>
<button class="disabled:opacity-50 ..." disabled>
  Submit
</button>

默认情况下，所有核心插件都没有启用该 disabled 变体。

您可以在 tailwind.config.js 文件中的 variants 部分控制是否为某个插件启用 disabled 变体：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      opacity: ['disabled'],
    }
  },
}

Visited

添加 visited: 前缀，以便当一个链接被访问后才应用功能类。

Unvisited link Visited link

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

默认情况下，所有核心插件都没有启用该 visited 变体。

您可以在 tailwind.config.js 文件中的 variants 部分控制是否为某个插件启用 visited 变体：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      textColor: ['visited'],
    }
  },
}

Checked

添加 checked: 前缀，以便当一个单选或复选框被选中时才应用功能类。

Option 1

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

默认情况下，所有核心插件都没有启用该 checked 变体。

您可以在 tailwind.config.js 文件中的 variants 部分控制是否为某个插件启用 checked 变体：

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

First-child

添加 first: 前缀，以仅当元素是父元素的第一个子元素时才应用功能类。当使用某种循环生成元素时，最为有用。

<div class="...">
  <div v-for="item in items" class="transform first:rotate-45 ...">
    {{ item }}
  </div>
</div>

需要特别注意的是，您应该将 first: 功能类添加到子元素上，而不是父元素。

默认情况下，所有核心插件都没有启用该 first-child 变体。

您可以在 tailwind.config.js 文件中的 variants 部分控制是否为某个插件启用 first 变体：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      borderWidth: ['first'],
    }
  },
}

Last-child

添加 last: 前缀，在仅当元素是父元素的最后一个子元素时才应用功能类。当使用某种循环生成元素时，最为有用。

<div class="...">
  <div v-for="item in items" class="transform last:rotate-45 ...">
    {{ item }}
  </div>
</div>

需要特别注意的是，您应该将 last: 功能类添加到子元素上，而不是父元素。

默认情况下，所有核心插件都没有启用该 last-child 变体。

您可以在 tailwind.config.js 文件中的 variants 部分控制是否为某个插件启用 last 变体：

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      borderWidth: ['last'],
    }
  },
}

Odd-child

添加 odd: 前缀使得仅在元素是父级奇数子元素的时候才应用功能类。当使用某种循环生成元素时，最为有用。

<div class="...">
  <div v-for="item in items" class="transform odd:rotate-45 ...">
    {{ item }}
  </div>
</div>

需要特别注意的是，您应该将 odd: 功能类添加到子元素上，而不是父元素。

默认情况下，所有核心插件都没有启用该 odd-child 变体。

您可以在 tailwind.config.js 文件中的 variants 部分控制是否为某个插件启用 odd 变体：

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

Even-child

添加 even: 前缀使得仅在元素是父级偶数子元素的时候才应用功能类。当使用某种循环生成元素时，最为有用。

<div class="...">
  <div v-for="item in items" class="transform even:rotate-45 ...">
    {{ item }}
  </div>
</div>

需要特别注意的是，您应该将 even: 功能类添加到子元素上，而不是父元素。

默认情况下，所有核心插件都没有启用该 even-child 变体。

您可以在 tailwind.config.js 文件中的 variants 部分控制是否为某个插件启用 even 变体：

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

与响应式前缀结合使用

状态变体也是响应式的，意味着您可以执行诸如在不同断点处更改元素的悬停样式的操作。

要在指定断点应用一个状态变体，请在状态前缀之前添加响应式前缀：

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

为自定义功能类生成变体

您可以通过使用 @variants 指令包裹住您自己的自定义 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;
}

查看 @variants 指令文档了解更多信息。

创建自定义变体

您可以通过编写自定义变体插件为 Tailwind 默认不支持的任何状态创建自己的变体。

例如，这个简单的插件增加了对 required 伪类变体的支持：

// tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addVariant, e }) {
      addVariant('required', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${e(`required${separator}${className}`)}:required`
        })
      })
    })
  ]
}

点击变体插件文档了解更多关于编写变体插件的信息。

默认变体参考

出于文件大小的考虑，默认情况下，Tailwind 没有包含所有功能类的所有变体。

要为您的项目配置启用哪些变体，参考配置变体文档。

// Default configuration
module.exports = {
  // ...
  variants: {
    accessibility: ['responsive', 'focus-within', 'focus'],
    alignContent: ['responsive'],
    alignItems: ['responsive'],
    alignSelf: ['responsive'],
    animation: ['responsive'],
    appearance: ['responsive'],
    backdropBlur: ['responsive'],
    backdropBrightness: ['responsive'],
    backdropContrast: ['responsive'],
    backdropDropShadow: ['responsive'],
    backdropFilter: ['responsive'],
    backdropGrayscale: ['responsive'],
    backdropHueRotate: ['responsive'],
    backdropInvert: ['responsive'],
    backdropSaturate: ['responsive'],
    backdropSepia: ['responsive'],
    backgroundAttachment: ['responsive'],
    backgroundBlendMode: ['responsive'],
    backgroundClip: ['responsive'],
    backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    backgroundImage: ['responsive'],
    backgroundOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    backgroundPosition: ['responsive'],
    backgroundRepeat: ['responsive'],
    backgroundSize: ['responsive'],
    blur: ['responsive'],
    borderCollapse: ['responsive'],
    borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    borderOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    borderRadius: ['responsive'],
    borderStyle: ['responsive'],
    borderWidth: ['responsive'],
    boxDecorationBreak: ['responsive'],
    boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
    boxSizing: ['responsive'],
    brightness: ['responsive'],
    clear: ['responsive'],
    container: ['responsive'],
    contrast: ['responsive'],
    cursor: ['responsive'],
    display: ['responsive'],
    divideColor: ['responsive', 'dark'],
    divideOpacity: ['responsive', 'dark'],
    divideStyle: ['responsive'],
    divideWidth: ['responsive'],
    dropShadow: ['responsive'],
    fill: ['responsive'],
    filter: ['responsive'],
    flex: ['responsive'],
    flexDirection: ['responsive'],
    flexGrow: ['responsive'],
    flexShrink: ['responsive'],
    flexWrap: ['responsive'],
    float: ['responsive'],
    fontFamily: ['responsive'],
    fontSize: ['responsive'],
    fontSmoothing: ['responsive'],
    fontStyle: ['responsive'],
    fontVariantNumeric: ['responsive'],
    fontWeight: ['responsive'],
    gap: ['responsive'],
    gradientColorStops: ['responsive', 'dark', 'hover', 'focus'],
    grayscale: ['responsive'],
    gridAutoColumns: ['responsive'],
    gridAutoFlow: ['responsive'],
    gridAutoRows: ['responsive'],
    gridColumn: ['responsive'],
    gridColumnEnd: ['responsive'],
    gridColumnStart: ['responsive'],
    gridRow: ['responsive'],
    gridRowEnd: ['responsive'],
    gridRowStart: ['responsive'],
    gridTemplateColumns: ['responsive'],
    gridTemplateRows: ['responsive'],
    height: ['responsive'],
    hueRotate: ['responsive'],
    inset: ['responsive'],
    invert: ['responsive'],
    isolation: ['responsive'],
    justifyContent: ['responsive'],
    justifyItems: ['responsive'],
    justifySelf: ['responsive'],
    letterSpacing: ['responsive'],
    lineHeight: ['responsive'],
    listStylePosition: ['responsive'],
    listStyleType: ['responsive'],
    margin: ['responsive'],
    maxHeight: ['responsive'],
    maxWidth: ['responsive'],
    minHeight: ['responsive'],
    minWidth: ['responsive'],
    mixBlendMode: ['responsive'],
    objectFit: ['responsive'],
    objectPosition: ['responsive'],
    opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
    order: ['responsive'],
    outline: ['responsive', 'focus-within', 'focus'],
    overflow: ['responsive'],
    overscrollBehavior: ['responsive'],
    padding: ['responsive'],
    placeContent: ['responsive'],
    placeItems: ['responsive'],
    placeSelf: ['responsive'],
    placeholderColor: ['responsive', 'dark', 'focus'],
    placeholderOpacity: ['responsive', 'dark', 'focus'],
    pointerEvents: ['responsive'],
    position: ['responsive'],
    resize: ['responsive'],
    ringColor: ['responsive', 'dark', 'focus-within', 'focus'],
    ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus'],
    ringOffsetWidth: ['responsive', 'focus-within', 'focus'],
    ringOpacity: ['responsive', 'dark', 'focus-within', 'focus'],
    ringWidth: ['responsive', 'focus-within', 'focus'],
    rotate: ['responsive', 'hover', 'focus'],
    saturate: ['responsive'],
    scale: ['responsive', 'hover', 'focus'],
    sepia: ['responsive'],
    skew: ['responsive', 'hover', 'focus'],
    space: ['responsive'],
    stroke: ['responsive'],
    strokeWidth: ['responsive'],
    tableLayout: ['responsive'],
    textAlign: ['responsive'],
    textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    textDecoration: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
    textOpacity: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    textOverflow: ['responsive'],
    textTransform: ['responsive'],
    transform: ['responsive'],
    transformOrigin: ['responsive'],
    transitionDelay: ['responsive'],
    transitionDuration: ['responsive'],
    transitionProperty: ['responsive'],
    transitionTimingFunction: ['responsive'],
    translate: ['responsive', 'hover', 'focus'],
    userSelect: ['responsive'],
    verticalAlign: ['responsive'],
    visibility: ['responsive'],
    whitespace: ['responsive'],
    width: ['responsive'],
    wordBreak: ['responsive'],
    zIndex: ['responsive', 'focus-within', 'focus']
  }
}

概述