状态前缀

Tailwind 用一套优雅的状态前缀语法,让你在 class 里直接表达交互态:hover、focus、active、checked、first/last、暗色模式……不需要写一行 :hover 选择器或 media query。这是它比 Bootstrap 灵活得多的地方。

1. hover:鼠标悬停

最常用的状态前缀。在类前加 hover:,该类只在鼠标悬停时生效:

<!-- hover: 鼠标悬停时生效 -->
<button class="bg-blue-500 hover:bg-blue-600 text-white">
  悬停变色
</button>

<!-- 悬停时加阴影、放大 -->
<div class="bg-white shadow hover:shadow-lg hover:-translate-y-1 transition">
  悬停上浮
</div>

<!-- 注意:hover: 后面要写完整的类名,不是"差异",
     而是覆盖默认的同类 -->

要点:hover:bg-blue-600 是一个完整的覆盖类,不是"差异"。意思是"hover 时背景色变成 blue-600"。它覆盖了默认的 bg-blue-500。

2. focus:获得焦点

输入框、文本域、按钮被点击或 Tab 选中时获得焦点。focus 前缀让你优雅地设计焦点态,提升表单可用性:

<!-- focus: 获得焦点时生效(输入框、按钮) -->
<input class="border border-gray-300 focus:border-blue-500
              focus:ring-2 focus:ring-blue-200 outline-none"
       placeholder="点我" />

<!-- 解读:
     border-gray-300        默认浅灰边框
     focus:border-blue-500  获得焦点时边框变蓝
     focus:ring-2           焦点时加一个 2px 的外环
     focus:ring-blue-200    环的颜色淡蓝
     outline-none           去掉浏览器默认的黑色 outline -->

这套"border 变色 + ring 外环"的写法是表单焦点的标准答案,几乎所有现代网站都用类似样式。

3. 前缀组合:响应式 + 状态

状态前缀可以和响应式前缀组合。顺序是"响应式前缀:状态前缀:类名":

<!-- 状态前缀 + 响应式前缀 可以组合!
     顺序:响应式前缀:状态前缀:类名 -->

<!-- 大屏 hover 时变红色 -->
<button class="bg-blue-500 lg:hover:bg-red-500">
  按钮
</button>

<!-- 反过来不生效:hover:lg:bg-red-500 是错的 -->

<!-- 暗色模式 + hover 组合 -->
<button class="bg-blue-500 hover:bg-blue-600
               dark:bg-blue-600 dark:hover:bg-blue-500">
  按钮
</button>

这是 Tailwind 表达力强大的根源——任何状态在任何断点都可以独立配置。

4. group + group-hover:父状态控制子元素

这是 Tailwind 最强大的功能之一。传统 CSS 实现"鼠标悬停卡片时,卡片里的标题变颜色"需要写 .card:hover .title 这种父子选择器。Tailwind 用 group 优雅解决:

<!-- group + group-hover:实现"父元素 hover 时改子元素" -->

<!-- 父元素加 group -->
<a href="#" class="group block p-6 bg-white rounded-xl shadow
                  hover:shadow-lg transition">
  <!-- 子元素用 group-hover: 改样式 -->
  <h3 class="text-gray-900 group-hover:text-blue-600">
    标题(鼠标移到卡片上变蓝)
  </h3>
  <span class="text-blue-500 group-hover:translate-x-1 transition">
    了解更多 →
  </span>
</a>

<!-- 套路:
     1. 父元素加 class="group"
     2. 子元素加 group-hover:* 类
     3. 鼠标悬停父元素时,子元素的 group-hover:* 生效
     这是 Tailwind 实现复杂交互最强大的工具 -->

记住三步:父加 group → 子用 group-hover: → 鼠标悬停父时子的 group-hover 类生效。这个套路在卡片、菜单、tooltip 里无处不在。

5. 列表/表格的状态前缀

Tailwind 还提供了 first:、last:、odd:、even: 等"位置"前缀,让你不写特殊类名就能实现斑马线、去首尾间距等:

<!-- 列表/表格的状态前缀 -->

<ul class="divide-y divide-gray-200">
  <li class="first:pt-0 last:pb-0 py-3">第一项(first: 去掉上 padding)</li>
  <li class="py-3">第二项</li>
  <li class="py-3">第三项</li>
  <li class="py-3">第四项</li>
</ul>

<table>
  <tr class="odd:bg-gray-50 even:bg-white">
    <td>奇数行变浅灰,偶数行白色</td>
  </tr>
</table>

6. 暗色模式:dark:

dark: 是个高频前缀。启用方式分三步:

<!-- 暗色模式:dark: 前缀 -->

<!-- 步骤 1:tailwind.config.js 启用
     module.exports = { darkMode: 'class', ... } -->

<!-- 步骤 2:JS 切换主题时给 <html> 加 .dark 类
     document.documentElement.classList.toggle('dark') -->

<!-- 步骤 3:HTML 里用 dark: 前缀 -->
<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
  这块内容会随暗色模式自动切换。
</div>

<!-- 套路:每个颜色类后面跟一个 dark: 版本
     bg-white              => dark:bg-gray-900
     text-gray-900         => dark:text-gray-100
     border-gray-200       => dark:border-gray-800 -->

实战技巧:颜色类成对出现。每写一个 bg-X 或 text-X,就问自己"暗色模式下应该是什么"。长期下来形成"每个颜色都自带 dark 版本"的肌肉记忆。

7. 完整状态前缀列表

Tailwind 内置的状态前缀远不止上面这些:

<!-- Tailwind 内置的状态前缀完整列表:

     交互态:
     hover:        鼠标悬停
     focus:        获得焦点
     focus-within: 子元素获得焦点(常用于搜索框父级)
     focus-visible: 键盘焦点(区别于鼠标点击)
     active:       鼠标按下
     visited:      链接访问过

     表单状态:
     disabled:     禁用
     required:     必填
     checked:      勾选(checkbox/radio)

     子元素位置:
     first:        第一个
     last:         最后一个
     only:         唯一一个
     odd:          奇数
     even:         偶数
     first-of-type: 同类型第一个

     父元素状态:
     group-hover:  父元素(带 group)被 hover
     group-focus:  父元素获得焦点

     主题:
     dark:         暗色模式

     其他:
     motion-safe:  用户允许动画时
     motion-reduce: 用户要求减少动画时
     print:        打印时 -->

8. focus-within vs focus-visible

这两个常被混淆:

focus::元素本身获得焦点。鼠标点击和键盘 Tab 都触发。
focus-within::元素或它的任意子元素获得焦点。常用于"搜索框容器在输入时高亮"——容器本身不是 input,但里面有 input。
focus-visible::仅键盘焦点时触发(浏览器 modern 行为)。鼠标点击不显示焦点环,Tab 时才显示——是更优雅的焦点处理。

9. 实战示例:可交互卡片

把响应式、状态前缀、group 组合起来,写一个完整的"产品特性卡片":

卡片本身有 hover 阴影变化(hover:shadow-xl transition-shadow)
卡片内的图标在卡片 hover 时变颜色(group + group-hover:text-blue-600)
"了解更多 →"在卡片 hover 时右移(group-hover:translate-x-1 transition)
暗色模式自动适配(dark:bg-gray-800 等)

这整套交互,在传统 CSS 里需要写十几个选择器,在 Tailwind 里全是 class。这种"声明式"的写法是 Tailwind 的核心魅力。

10. 注意事项

不是所有类都能加状态前缀:只有相关的可以。比如 hover:flex 没意义(layout 不会随 hover 变)。
过渡动画:加 transition 类让状态切换更平滑,否则颜色突变看着生硬。
移动端无 hover:手机没有鼠标,hover: 在触屏上行为不可预测。关键交互别只靠 hover。
可访问性:焦点态不要去掉(outline-none 单用很危险),必须配 focus:ring-* 替代。

小结

记住核心前缀:

hover::鼠标悬停
focus: / focus-within: / focus-visible::焦点态
active::鼠标按下
group-hover::父级 hover 控子级
first: / last: / odd: / even::位置
dark::暗色模式
组合:响应式前缀 + 状态前缀 + 类(如 md:hover:bg-red-500)

下一篇讲自定义配置,把 Tailwind 改造成你的设计系统。

← 上一篇响应式设计

下一篇自定义配置 →

✈️💬