状态样式

Tailwind CSS 提供了丰富的状态变体，让你能够轻松地为悬停、焦点、激活等状态添加样式。本章将详细介绍如何使用状态变体。

悬停状态

使用 hover: 前缀为悬停状态添加样式：

<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded">
  悬停时背景变深
</button>

<a href="#" class="text-blue-500 hover:underline">
  悬停时显示下划线
</a>

<div class="bg-white hover:bg-gray-100 p-4 rounded cursor-pointer">
  悬停时背景变色
</div>

焦点状态

使用 focus: 前缀为焦点状态添加样式：

<input class="border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 px-4 py-2 rounded outline-none">

<textarea class="border focus:border-blue-500 focus:ring-2 focus:ring-blue-200 px-4 py-2 rounded outline-none"></textarea>

<button class="bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-300 px-4 py-2 rounded text-white">
  焦点时显示环
</button>

焦点可见

使用 focus-visible: 前缀，仅在键盘导航时显示焦点样式：

<button class="bg-blue-500 focus-visible:ring-2 focus-visible:ring-blue-300 px-4 py-2 rounded text-white">
  仅键盘导航时显示焦点环
</button>

激活状态

使用 active: 前缀为激活（按下）状态添加样式：

<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-800 text-white px-4 py-2 rounded">
  按下时背景更深
</button>

禁用状态

使用 disabled: 前缀为禁用状态添加样式：

<button class="bg-blue-500 disabled:bg-gray-300 disabled:cursor-not-allowed text-white px-4 py-2 rounded" disabled>
  禁用按钮
</button>

<input class="border disabled:bg-gray-100 disabled:text-gray-400 px-4 py-2 rounded" disabled value="禁用输入框">

也可以使用 not-disabled: 为非禁用状态添加样式：

<button class="bg-blue-500 not-disabled:hover:bg-blue-600 text-white px-4 py-2 rounded">
  仅非禁用时响应悬停
</button>

选中状态

用于复选框、单选框等可选中元素：

<input type="checkbox" class="accent-blue-500 checked:accent-blue-700">

<input type="radio" class="accent-blue-500 checked:accent-blue-700">

只读状态

<input class="border readonly:bg-gray-100 px-4 py-2 rounded" readonly value="只读内容">

占位符状态

<input class="placeholder:text-gray-400 px-4 py-2 border rounded" placeholder="输入内容">

组合状态变体

可以组合多个状态变体：

<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 focus:ring-2 focus:ring-blue-300 disabled:bg-gray-300 disabled:cursor-not-allowed text-white px-4 py-2 rounded">
  完整状态按钮
</button>

父元素状态

group 修饰符

使用 group 和 group-hover: 实现父元素悬停时改变子元素样式：

<div class="group bg-white p-4 rounded-lg shadow hover:shadow-lg cursor-pointer">
  <h3 class="font-semibold group-hover:text-blue-500">标题</h3>
  <p class="text-gray-600 group-hover:text-gray-800">描述内容</p>
  <span class="opacity-0 group-hover:opacity-100 transition-opacity">显示详情</span>
</div>

命名组

使用命名组处理嵌套的情况：

<div class="group/card bg-white p-4 rounded-lg">
  <div class="group/button">
    <button class="group-hover/card:bg-blue-100 group-hover/button:bg-blue-500 px-4 py-2 rounded">
      按钮
    </button>
  </div>
</div>

其他组状态

<div class="group">
  <input class="border px-4 py-2 rounded">
  <p class="hidden group-focus-within:block">输入时显示提示</p>
</div>

<div class="group">
  <input type="checkbox" class="group-checked:bg-blue-500">
  <span class="group-checked:font-bold">选中时加粗</span>
</div>

兄弟元素状态

peer 修饰符

使用 peer 和 peer-*: 实现兄弟元素状态影响：

<div>
  <input type="checkbox" class="peer sr-only" id="toggle">
  <label for="toggle" class="bg-gray-300 peer-checked:bg-blue-500 w-12 h-6 rounded-full cursor-pointer block relative">
    <span class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full peer-checked:left-7 transition-all"></span>
  </label>
</div>

<div>
  <input class="border peer px-4 py-2 rounded">
  <p class="hidden peer-focus:block text-sm text-gray-500 mt-1">输入提示</p>
</div>

<div>
  <input class="border peer invalid:border-red-500 px-4 py-2 rounded">
  <p class="hidden peer-invalid:block text-sm text-red-500 mt-1">请输入有效内容</p>
</div>

暗黑模式

使用 dark: 前缀为暗黑模式添加样式：

<div class="bg-white dark:bg-gray-800 p-4 rounded-lg">
  <h3 class="text-gray-900 dark:text-white font-semibold">标题</h3>
  <p class="text-gray-600 dark:text-gray-300">描述内容</p>
</div>

<button class="bg-blue-500 dark:bg-blue-600 text-white px-4 py-2 rounded">
  按钮
</button>

启用暗黑模式

在配置文件中设置：

export default {
  darkMode: 'class', // 或 'media'
}

• media：根据系统偏好自动切换
• class：根据 HTML 元素的 dark 类切换

切换暗黑模式

// 检查当前模式
if (document.documentElement.classList.contains('dark')) {
  // 暗黑模式
}

// 切换模式
document.documentElement.classList.toggle('dark')

打印样式

使用 print: 前缀为打印添加样式：

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

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

<div class="print:text-black print:bg-white">
  打印时使用黑白配色
</div>

强制颜色模式

用于高对比度模式：

<div class="forced-color-adjust-auto">
  自动调整颜色
</div>

<div class="forced-color-adjust-none">
  不调整颜色
</div>

动画过渡

结合状态变体实现平滑过渡：

<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded transition-colors duration-300">
  颜色过渡
</button>

<div class="opacity-0 hover:opacity-100 transition-opacity duration-500">
  透明度过渡
</div>

<div class="transform hover:scale-105 transition-transform duration-200">
  缩放过渡
</div>

过渡属性

<div class="transition">过渡所有属性</div>
<div class="transition-none">无过渡</div>
<div class="transition-all">过渡所有属性</div>
<div class="transition-colors">过渡颜色</div>
<div class="transition-opacity">过渡透明度</div>
<div class="transition-shadow">过渡阴影</div>
<div class="transition-transform">过渡变换</div>

过渡时长

<div class="duration-75">75ms</div>
<div class="duration-100">100ms</div>
<div class="duration-150">150ms</div>
<div class="duration-200">200ms</div>
<div class="duration-300">300ms</div>
<div class="duration-500">500ms</div>
<div class="duration-700">700ms</div>
<div class="duration-1000">1000ms</div>

过渡延迟

<div class="delay-75">延迟 75ms</div>
<div class="delay-150">延迟 150ms</div>
<div class="delay-300">延迟 300ms</div>
<div class="delay-500">延迟 500ms</div>

过渡曲线

<div class="ease-linear">线性</div>
<div class="ease-in">加速</div>
<div class="ease-out">减速</div>
<div class="ease-in-out">加速减速</div>

实战示例

完整按钮组件

<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 disabled:bg-gray-300 disabled:cursor-not-allowed text-white font-medium px-4 py-2 rounded transition-colors duration-200">
  按钮
</button>

卡片悬停效果

<div class="group bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 overflow-hidden cursor-pointer">
  <img src="image.jpg" alt="" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
  <div class="p-4">
    <h3 class="font-semibold group-hover:text-blue-500 transition-colors">标题</h3>
    <p class="text-gray-600 mt-2">描述内容</p>
  </div>
</div>

表单验证

<div class="space-y-2">
  <label class="block text-gray-700">邮箱</label>
  <input 
    type="email" 
    class="w-full px-4 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-blue-500 invalid:border-red-500 invalid:focus:ring-red-300 invalid:focus:border-red-500"
    placeholder="[email protected]"
  >
  <p class="text-sm text-red-500 hidden peer-invalid:block">请输入有效的邮箱地址</p>
</div>

开关组件

<label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" class="sr-only peer">
  <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div>
  <span class="ml-3 text-gray-700">开关</span>
</label>

小结

本章介绍了 Tailwind CSS 的状态变体：

• 悬停状态：使用 hover: 前缀
• 焦点状态：使用 focus: 和 focus-visible: 前缀
• 激活状态：使用 active: 前缀
• 禁用状态：使用 disabled: 前缀
• 父元素状态：使用 group 和 group-hover: 等
• 兄弟元素状态：使用 peer 和 peer-*: 等
• 暗黑模式：使用 dark: 前缀
• 打印样式：使用 print: 前缀
• 动画过渡：结合状态变体实现平滑过渡

下一章，我们将学习 Tailwind CSS 的自定义配置。