Skip to Content

1. 核心概念与语法

状态修饰符的本质是 CSS 中的伪类 (Pseudo-classes)，例如 :hover, :focus, :disabled 等。Tailwind 将它们变成了易于使用的前缀。

基本语法非常简单：

[状态修饰符]:[效用类]

例如，hover:bg-blue-700 的意思是：“当鼠标悬停 (hover) 在这个元素上时，应用 bg-blue-700 这个类（即设置背景色为深蓝色）”。

2. 最常用的状态修饰符 (按场景分类)

a. 用户交互状态 (Interaction States)

这些是处理用户与元素互动时最常用的修饰符。

  • hover: 鼠标悬停时。
  • focus: 元素获得焦点时（通过鼠标点击或 Tab 键）。
  • active: 元素被激活时（例如，鼠标按下按钮但还未松开）。
  • focus-visible: 当元素通过键盘（如 Tab 键）获得焦点时才显示轮廓，点击则不显示。这对于提升可访问性 (Accessibility) 非常有用。
  • focus-within: 当元素本身或其任何子元素获得焦点时。常用于表单容器。

示例：创建一个交互丰富的按钮

<button class="
  /* --- 默认样式 --- */
  bg-violet-500 text-white font-semibold py-2 px-4 rounded-lg shadow-md 
  transition-all duration-300
 
  /* --- 悬停状态 --- */
  hover:bg-violet-700 hover:shadow-lg
 
  /* --- 激活状态 --- */
  active:bg-violet-800 active:scale-95
 
  /* --- 焦点状态 --- */
  focus:outline-none focus:ring-2 focus:ring-violet-400 focus:ring-opacity-75
">
  点击我
</button>

分析：

  1. 默认: 紫色背景、白色文字、圆角、阴影。
  2. hover:: 鼠标悬停时，背景色变深，阴影变大。
  3. active:: 点击按住时，背景色变得更深，同时元素缩小到 95%（scale-95），产生一个按下的视觉效果。
  4. focus:: 获得焦点时，移除浏览器默认的丑陋轮廓 (outline-none)，并用一个漂亮的、半透明的紫色光环 (ring) 代替。

b. 表单状态 (Form States)

这些修饰符对于构建具有良好用户体验的表单至关重要。

  • disabled: 元素被禁用时。
  • checked: 当单选框 (radio) 或复选框 (checkbox) 被选中时。
  • required: 当表单元素有 required 属性时。
  • optional: 当表单元素没有 required 属性时。
  • invalid: 当表单元素的内容不符合其类型或 pattern 规则时（例如，input type="email" 里输入了非法字符）。
  • valid: 与 invalid 相反。

示例：一个带验证状态的输入框

<input 
  type="email" 
  required
  class="
    /* --- 默认和焦点样式 --- */
    border border-gray-300 rounded-md p-2 w-full
    focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none
 
    /* --- 禁用状态 --- */
    disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed
 
    /* --- 验证状态 --- */
    invalid:border-red-500 invalid:text-red-600
    focus:invalid:border-red-500 focus:invalid:ring-red-500
  "
>

分析：

  1. disabled:: 如果 input 被禁用，背景变灰，文字变浅，鼠标指针变为“禁止”。
  2. invalid:: 如果输入内容不合法，边框和文字都变成红色，以警示用户。
  3. focus:invalid:: 为了更好的体验，当用户正在输入且内容不合法时，焦点光环也变成红色。

c. 结构与位置伪类 (Structural & Positional)

用于根据元素在兄弟节点中的位置来应用样式。

  • first: 第一个子元素。
  • last: 最后一个子元素。
  • odd: 奇数位置的子元素。
  • even: 偶数位置的子元素。
  • empty: 当元素内没有任何内容（包括空格）时。

示例：创建一个隔行变色的列表

<ul>
  <li class="p-2 odd:bg-gray-100 even:bg-gray-200 first:rounded-t-lg last:rounded-b-lg">
    列表项 1 (奇数行)
  </li>
  <li class="p-2 odd:bg-gray-100 even:bg-gray-200 first:rounded-t-lg last:rounded-b-lg">
    列表项 2 (偶数行)
  </li>
  <li class="p-2 odd:bg-gray-100 even:bg-gray-200 first:rounded-t-lg last:rounded-b-lg">
    列表项 3 (奇数行)
  </li>
</ul>

分析：

  • odd: & even:: 轻松实现了表格或列表的斑马条纹效果，增强可读性。
  • first: & last:: 给第一个和最后一个 <li> 元素分别添加了顶部和底部的圆角，使得整个 <ul> 看起来像一个完整的圆角卡片。

3. 高级状态选择器 (group 和 peer)

这是 Tailwind 的“秘密武器”，让你能够基于父元素或兄弟元素的状态来改变当前元素的样式。

a. group：基于父元素状态

当你希望鼠标悬停在一个容器上时，改变其内部某个子元素的样式，group 就派上用场了。

  1. 在父元素上添加 class="group"。
  2. 在子元素上使用 group-hover:[效用类]。

示例：悬停卡片时，标题变色，图标出现

<a href="#" class="group block max-w-xs p-6 bg-white rounded-lg shadow-lg hover:bg-blue-500">
  <h3 class="font-bold text-xl text-black group-hover:text-white">
    我的项目
  </h3>
  <p class="text-gray-600 group-hover:text-blue-100">
    这是一个项目的简介...
  </p>
  <div class="opacity-0 group-hover:opacity-100 transition-opacity">
    <svg><!-- 一个小箭头图标 --></svg>
  </div>
</a>

分析：

  • 父元素 <a> 上有 group。
  • 当鼠标悬停在 <a> (group) 上时：
    • <h3> 的文字颜色从黑色变为白色 (group-hover:text-white)。
    • <p> 的文字颜色从灰色变为浅蓝色 (group-hover:text-blue-100)。
    • 图标 div 的透明度从 0 变为 100，实现了淡入效果 (group-hover:opacity-100)。

b. peer：基于兄弟元素状态

当你希望一个元素的状态能影响其后面紧邻的兄弟元素时，使用 peer。

  1. 在“触发”状态的元素上添加 class="peer"。
  2. 在其后的兄弟元素上使用 peer-invalid:[效用类], peer-checked:[效用类] 等。

示例：当输入框内容不合法时，显示错误提示信息

<div class="relative">
  <input 
    id="email" 
    type="email" 
    class="peer ... invalid:border-red-500 ..." 
    placeholder=" "
  />
  <label 
    for="email" 
    class="
      absolute left-2 -top-2.5 bg-white px-1 text-sm text-gray-600
      transition-all
      peer-placeholder-shown:top-2 peer-placeholder-shown:text-base
      peer-focus:-top-2.5 peer-focus:text-sm peer-focus:text-blue-600
    "
  >
    邮箱
  </label>
  <p class="mt-2 text-sm text-red-600 invisible peer-invalid:visible">
    请输入有效的邮箱地址。
  </p>
</div>

分析：

  • input 元素被标记为 peer。
  • 其后的 p 元素默认是 invisible (不可见)。
  • 当 input (peer) 的状态变为 invalid 时，p 元素应用 peer-invalid:visible，从而变得可见。这比用 JavaScript 来切换 hidden 类要优雅得多。
  • （这个例子还展示了 peer-placeholder-shown 和 peer-focus 来实现浮动标签效果，这是 peer 的另一个经典用法。）

4. 其他重要修饰符

  • dark: 用于暗黑模式。在 <html> 标签上添加 class="dark" 后，所有 dark:* 的类都会生效。 
    <body class="bg-white text-black dark:bg-gray-900 dark:text-white">
  • aria-*: 用于响应 aria-* 属性，对无障碍设计极有帮助。例如 aria-checked="true":bg-blue-600。
  • open: 用于 <details> 和 <dialog> 元素打开时的状态。

总结

Tailwind 的状态修饰符是一个设计精良且功能完备的系统。它将绝大多数动态样式逻辑都保留在了 HTML 中，与组件结构紧密结合，极大地提升了开发效率和代码的可维护性。

掌握了 hover, focus, disabled 等基础修饰符，你就能处理大部分UI需求。而一旦你精通了 group 和 peer，你就能构建出以往需要复杂 CSS 选择器或 JavaScript 才能实现的交互效果。

Last updated on
Map