tailwindcss 官网（四）核心概念：悬停、焦点和其它状态

文章目录

tailwindcss 官网（四）核心概念：悬停、焦点和其它状态
- 3. 悬停、焦点和其它状态
- - 概述
  - Hover
  - Focus
  - Active
  - Group-hover
  - Group-focus
  - Focus-within
  - Focus-visible
  - Motion-safe
  - Motion-reduce
  - Disabled
  - Visited
  - Checked
  - First-child
  - Last-child
  - Odd-child
  - Even-child
  - 与响应式前缀结合使用
  - 为自定义功能类生成变体
  - 创建自定义变体
  - 默认变体参考

官网：安装 - Tailwind CSS 中文文档

3. 悬停、焦点和其它状态

使用功能类为处于悬停、焦点和其它状态的元素设置样式。

概述

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

tailwindcss 官网（四）核心概念：悬停、焦点和其它状态tailwindcss 官网（四）核心概念：悬停、焦点和其它状态

<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 状态时应用一个功能类。

tailwindcss 官网（四）核心概念：悬停、焦点和其它状态tailwindcss 官网（四）核心概念：悬停、焦点和其它状态

默认情况下，以下核心插件启用了该

hover

变体：

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

您可以在

tailwind.config.js

文件中的

variants

部分控制是否为某个插件启用

hover

变体：

Focus

添加

focus:

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

tailwindcss 官网（四）核心概念：悬停、焦点和其它状态tailwindcss 官网（四）核心概念：悬停、焦点和其它状态

默认情况下，以下核心插件启用了该

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

变体：

Active

添加

active:

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

tailwindcss 官网（四）核心概念：悬停、焦点和其它状态tailwindcss 官网（四）核心概念：悬停、焦点和其它状态

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

active

变体。

您可以在

tailwind.config.js

文件中的

variants

部分控制是否为某个插件启用

active

变体：

Group-hover

如果您需要当鼠标悬停在一个指定的父元素上时对其子元素设置样式，给父元素添加

group

类，并且为子元素的功能类添加

group-hover:

前缀。

tailwindcss 官网（四）核心概念：悬停、焦点和其它状态tailwindcss 官网（四）核心概念：悬停、焦点和其它状态

默认情况下，以下核心插件启用了该

group-hover

变体：

backgroundColor
backgroundOpacity
borderColor
borderOpacity
boxShadow
opacity
textColor
textDecoration
textOpacity

您可以在

tailwind.config.js

文件中的

variants

部分控制是否为某个插件启用

group-hover

变体：

Group-focus

除了 focus，

group-focus

变体的工作方式与

group-hover

一样。

tailwindcss 官网（四）核心概念：悬停、焦点和其它状态tailwindcss 官网（四）核心概念：悬停、焦点和其它状态

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

group-focus

变体。

您可以在

tailwind.config.js

文件中的

variants

部分控制是否为某个插件启用

group-focus

变体：

Focus-within

添加

focus-within:

前缀，以便仅在一个子元素获得焦点时才应用功能类。（输入的文字颜色和预先显示的颜色不一样）

tailwindcss 官网（四）核心概念：悬停、焦点和其它状态tailwindcss 官网（四）核心概念：悬停、焦点和其它状态

默认情况下，以下核心插件启用了该

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

变体：

Focus-visible

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

添加

focus-visible:

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

tailwindcss 官网（四）核心概念：悬停、焦点和其它状态tailwindcss 官网（四）核心概念：悬停、焦点和其它状态

注意：目前仅 Chrome, Edge, and Firefox 原生支持

focus-visible

，因此，为了获得足够的浏览器支持，您应该安装并配置 focus-visible JS polyfill 和 focus-visible PostCSS polyfill，并确保该插件在 PostCSS 插件列表中位于 Tailwind 之后。

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

focus-visible

变体。

您可以在

tailwind.config.js

文件中的

variants

部分控制是否为某个插件启用

focus-visible

变体：

Motion-safe

添加

motion-safe:

前缀以便仅在

prefers-reduced-motion

匹配

no-preference

时应用功能类。

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

tailwindcss 官网（四）核心概念：悬停、焦点和其它状态tailwindcss 官网（四）核心概念：悬停、焦点和其它状态

注意：不像其它大多数变体，

motion-safe

在按以下顺序排列时可以与响应式变体和其它变体（如

hover

）结合使用。

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

motion-safe

变体。

您可以在

tailwind.config.js

文件中的

variants

部分控制是否为某个插件启用

motion-safe

变体：

Motion-reduce

添加

motion-reduce:

前缀以便仅在

prefers-reduced-motion

匹配

reduce

时应用功能类。

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

tailwindcss 官网（四）核心概念：悬停、焦点和其它状态tailwindcss 官网（四）核心概念：悬停、焦点和其它状态

注意：不像其它大多数变体，

motion-reduce

在按以下顺序排列时可以与响应式变体和其它变体（如

hover

）结合使用。

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

motion-reduce

变体。

您可以在

tailwind.config.js

文件中的

variants

部分控制是否为某个插件启用

motion-reduce

变体：

Disabled

添加

disabled:

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

tailwindcss 官网（四）核心概念：悬停、焦点和其它状态tailwindcss 官网（四）核心概念：悬停、焦点和其它状态

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

disabled

变体。

您可以在

tailwind.config.js

文件中的

variants

部分控制是否为某个插件启用

disabled

变体：

Visited

添加

visited:

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

tailwindcss 官网（四）核心概念：悬停、焦点和其它状态tailwindcss 官网（四）核心概念：悬停、焦点和其它状态

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

visited

变体。

您可以在

tailwind.config.js

文件中的

variants

部分控制是否为某个插件启用

visited

变体：

Checked

添加

checked:

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

tailwindcss 官网（四）核心概念：悬停、焦点和其它状态tailwindcss 官网（四）核心概念：悬停、焦点和其它状态

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

checked

变体。

您可以在

tailwind.config.js

文件中的

variants

部分控制是否为某个插件启用

checked

变体：

First-child

添加

first:

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

tailwindcss 官网（四）核心概念：悬停、焦点和其它状态tailwindcss 官网（四）核心概念：悬停、焦点和其它状态

需要特别注意的是，您应该将

first:

功能类添加到子元素上，而不是父元素。

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

first-child

变体。

您可以在

tailwind.config.js

文件中的

variants

部分控制是否为某个插件启用

first

变体：

Last-child

添加

last:

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

tailwindcss 官网（四）核心概念：悬停、焦点和其它状态tailwindcss 官网（四）核心概念：悬停、焦点和其它状态

需要特别注意的是，您应该将

last:

功能类添加到子元素上，而不是父元素。

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

last-child

变体。

您可以在

tailwind.config.js

文件中的

variants

部分控制是否为某个插件启用

last

变体：

Odd-child

添加

odd:

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

tailwindcss 官网（四）核心概念：悬停、焦点和其它状态tailwindcss 官网（四）核心概念：悬停、焦点和其它状态

需要特别注意的是，您应该将

odd:

功能类添加到子元素上，而不是父元素。

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

odd-child

变体。

您可以在

tailwind.config.js

文件中的

variants

部分控制是否为某个插件启用

odd

变体：

Even-child

添加

even:

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

tailwindcss 官网（四）核心概念：悬停、焦点和其它状态tailwindcss 官网（四）核心概念：悬停、焦点和其它状态

需要特别注意的是，您应该将

even:

功能类添加到子元素上，而不是父元素。

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

even-child

变体。

您可以在

tailwind.config.js

文件中的

variants

部分控制是否为某个插件启用

even

变体：

与响应式前缀结合使用

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

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

为自定义功能类生成变体

您可以通过使用

@variants

指令包裹住您自己的自定义 CSS 类来为他们生成状态变体：

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

创建自定义变体

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

例如，这个简单的插件增加了对

required

伪类变体的支持：

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

默认变体参考

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

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

// Default configuration
module.exports = {
  // ...
  variants: {
    accessibility: ['responsive', 'focus-within', 'focus'],
    alignContent: ['responsive'],
    alignItems: ['responsive'],
    alignSelf: ['responsive'],
    animation: ['responsive'],
    appearance: ['responsive'],
    backgroundAttachment: ['responsive'],
    backgroundClip: ['responsive'],
    backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    backgroundImage: ['responsive'],
    backgroundOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
    backgroundPosition: ['responsive'],
    backgroundRepeat: ['responsive'],
    backgroundSize: ['responsive'],
    borderCollapse: ['responsive'],
    borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    borderOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
    borderRadius: ['responsive'],
    borderStyle: ['responsive'],
    borderWidth: ['responsive'],
    boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
    boxSizing: ['responsive'],
    clear: ['responsive'],
    container: ['responsive'],
    cursor: ['responsive'],
    display: ['responsive'],
    divideColor: ['responsive', 'dark'],
    divideOpacity: ['responsive'],
    divideStyle: ['responsive'],
    divideWidth: ['responsive'],
    fill: ['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'],
    gridAutoColumns: ['responsive'],
    gridAutoFlow: ['responsive'],
    gridAutoRows: ['responsive'],
    gridColumn: ['responsive'],
    gridColumnEnd: ['responsive'],
    gridColumnStart: ['responsive'],
    gridRow: ['responsive'],
    gridRowEnd: ['responsive'],
    gridRowStart: ['responsive'],
    gridTemplateColumns: ['responsive'],
    gridTemplateRows: ['responsive'],
    height: ['responsive'],
    inset: ['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'],
    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', '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', 'focus-within', 'focus'],
    ringWidth: ['responsive', 'focus-within', 'focus'],
    rotate: ['responsive', 'hover', 'focus'],
    scale: ['responsive', 'hover', 'focus'],
    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', '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']
  }
}

tailwindcss 官网（四）核心概念：悬停、焦点和其它状态tailwindcss 官网（四）核心概念：悬停、焦点和其它状态

tailwindcss 官网（四）核心概念：悬停、焦点和其它状态

文章目录

3. 悬停、焦点和其它状态

概述

Hover

Focus

Active

Group-hover

Group-focus

Focus-within

Focus-visible

Motion-safe

Motion-reduce

Disabled

Visited

Checked

First-child

Last-child

Odd-child

Even-child

与响应式前缀结合使用

为自定义功能类生成变体

创建自定义变体

默认变体参考

继续阅读