Tailwind CSS 悬停、焦点和其他状态

悬停、焦点和其它状态

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

与 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:​ 前缀。

<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:outline-none 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: {
      animation: ['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: {
      animation: ['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:​ 前缀，以便当一个链接被访问后才应用功能类。

<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:​ 前缀，以便当一个单选或复选框被选中时才应用功能类。

<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;
}

创建自定义变体

您可以通过编写自定义变体插件为 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'],
    backdropFilter: ['responsive'],
    backdropGrayscale: ['responsive'],
    backdropHueRotate: ['responsive'],
    backdropInvert: ['responsive'],
    backdropOpacity: ['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'],
    backgroundOrigin: ['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']
  }
}