TailwindCSS 的状态变体（hover、focus、active 等）如何使用？

TailwindCSS 提供了强大的状态变体系统，允许开发者根据元素的不同状态（如 hover、focus、active 等）应用不同的样式。

基础状态变体

1. Hover 状态

鼠标悬停时应用的样式。

html
<!-- 基础 hover -->
<button class="bg-blue-500 hover:bg-blue-600">
  悬停变色
</button>

<!-- 多个 hover 效果 -->
<button class="bg-blue-500 hover:bg-blue-600 hover:scale-105 hover:shadow-lg">
  多重悬停效果
</button>

2. Focus 状态

元素获得焦点时应用的样式。

html
<!-- 基础 focus -->
<input class="border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200">

<!-- focus-visible（仅键盘导航时） -->
<button class="focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
  键盘导航焦点
</button>

3. Active 状态

元素被激活（点击）时应用的样式。

html
<!-- 基础 active -->
<button class="bg-blue-500 active:bg-blue-700">
  点击效果
</button>

<!-- 组合状态 -->
<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 active:scale-95">
  组合状态效果
</button>

表单状态变体

1. Disabled 状态

禁用元素的样式。

html
<!-- 基础 disabled -->
<button class="bg-blue-500 disabled:bg-gray-400 disabled:cursor-not-allowed" disabled>
  禁用按钮
</button>

<!-- 表单输入 -->
<input class="border-gray-300 disabled:bg-gray-100 disabled:text-gray-500" disabled>

2. Read-only 状态

只读元素的样式。

html
<input class="border-gray-300 read-only:bg-gray-100 read-only:text-gray-500" readonly>

3. Checked 状态

复选框和单选按钮的选中状态。

html
<!-- 复选框 -->
<input type="checkbox" class="accent-blue-500 checked:accent-blue-600">

<!-- 使用 peer 变体 -->
<label class="flex items-center space-x-2">
  <input type="checkbox" class="peer">
  <span class="peer-checked:text-blue-500 peer-checked:font-bold">
    选中时变色
  </span>
</label>

伪类变体

1. First-child 和 Last-child

html
<!-- 第一个子元素 -->
<ul class="space-y-2">
  <li class="first:font-bold first:text-blue-500">第一个项目</li>
  <li>第二个项目</li>
  <li>第三个项目</li>
</ul>

<!-- 最后一个子元素 -->
<ul class="space-y-2">
  <li>第一个项目</li>
  <li>第二个项目</li>
  <li class="last:font-bold last:text-blue-500">最后一个项目</li>
</ul>

2. Odd 和 Even

html
<!-- 奇数行 -->
<table class="w-full">
  <tbody>
    <tr class="odd:bg-gray-100">
      <td>奇数行</td>
    </tr>
    <tr>
      <td>偶数行</td>
    </tr>
  </tbody>
</table>

<!-- 偶数行 -->
<table class="w-full">
  <tbody>
    <tr>
      <td>奇数行</td>
    </tr>
    <tr class="even:bg-gray-100">
      <td>偶数行</td>
    </tr>
  </tbody>
</table>

3. Before 和 After

html
<!-- 使用 before 伪元素 -->
<div class="before:content-[''] before:block before:w-4 before:h-4 before:bg-blue-500">
  前缀元素
</div>

<!-- 使用 after 伪元素 -->
<div class="after:content-['→'] after:ml-2 after:text-blue-500">
  后缀元素
</div>

媒体查询变体

1. 响应式变体

html
<!-- 移动优先响应式 -->
<div class="w-full md:w-1/2 lg:w-1/3">
  响应式宽度
</div>

<!-- 响应式显示隐藏 -->
<div class="block md:hidden lg:block">
  条件显示
</div>

2. Dark Mode

html
<!-- 启用暗色模式 -->
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
  暗色模式支持
</div>

<!-- 暗色模式配置 -->
<script>
// tailwind.config.js
module.exports = {
  darkMode: 'class', // 或 'media'
}
</script>

3. Print 样式

html
<div class="print:hidden">
  打印时隐藏
</div>

<div class="print:block hidden">
  仅打印时显示
</div>

交互状态变体

1. Group 和 Group-hover

html
<!-- 父子元素交互 -->
<div class="group">
  <p class="text-gray-600 group-hover:text-blue-500">
    悬停父元素时变色
  </p>
</div>

<!-- 多层嵌套 -->
<div class="group">
  <div class="group-hover:bg-blue-100">
    <span class="group-hover:text-blue-500">
      嵌套悬停效果
    </span>
  </div>
</div>

2. Peer 和 Peer-checked

html
<!-- 同级元素交互 -->
<label class="flex items-center space-x-2">
  <input type="checkbox" class="peer">
  <span class="peer-checked:text-blue-500 peer-checked:font-bold">
    选中时变色
  </span>
</label>

<!-- 复杂交互 -->
<div>
  <input type="checkbox" class="peer" id="toggle">
  <div class="hidden peer-checked:block">
    选中时显示的内容
  </div>
</div>

3. Focus-within

html
<!-- 子元素获得焦点时 -->
<div class="focus-within:ring-2 focus-within:ring-blue-500">
  <input type="text" placeholder="输入时父元素会有边框">
</div>

自定义状态变体

1. 添加自定义变体

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

module.exports = {
  plugins: [
    plugin(function({ addVariant }) {
      // 添加自定义变体
      addVariant('important', ({ modifySelectors, separator }) => {
        modifySelectors(({ className }) => {
          return `.${className}!`;
        });
      });
    }),
  ],
}

2. 使用自定义变体

html
<!-- 使用自定义变体 -->
<div class="text-gray-500 important:text-blue-500">
  优先级更高的样式
</div>

状态变体堆叠

TailwindCSS 支持堆叠多个状态变体，实现复杂的交互效果。

html
<!-- 堆叠多个变体 -->
<button class="
  bg-blue-500
  hover:bg-blue-600
  focus:bg-blue-700
  active:bg-blue-800
  disabled:bg-gray-400
  disabled:cursor-not-allowed
">
  多状态按钮
</button>

<!-- 响应式 + 状态 -->
<div class="
  w-full
  md:w-1/2
  lg:w-1/3
  hover:shadow-lg
  focus:ring-2
">
  响应式交互元素
</div>

<!-- 暗色模式 + 状态 -->
<button class="
  bg-white
  dark:bg-gray-800
  hover:bg-gray-100
  dark:hover:bg-gray-700
  text-gray-900
  dark:text-white
">
  暗色模式按钮
</button>

最佳实践

1. 合理使用状态变体：避免过度使用，保持代码可读性
2. 移动优先：先编写基础样式，再添加状态变体
3. 组合使用：合理组合多个状态变体实现复杂效果
4. 测试交互：确保所有状态变体在不同设备和浏览器中正常工作
5. 性能考虑：避免使用过多的状态变体影响性能

注意事项

1. 变体顺序：某些变体有特定的顺序要求（如 group-hover）
2. 浏览器兼容性：某些伪类在旧浏览器中可能不支持
3. 性能影响：过多的状态变体可能影响 CSS 文件大小
4. 可访问性：确保状态变体不会影响键盘导航和屏幕阅读器