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

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

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

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

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

概述

与 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.jsmodule.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.jsmodule.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.jsmodule.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.jsmodule.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.jsmodule.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
• bac