10. 状态处理：hover、focus 与伪类

传统 CSS 写 hover 要这样：

.btn { background: #0ea5e9; }
.btn:hover { background: #0369a1; }

Tailwind 把状态变成了前缀，直接拼在类名前面：

<button class="bg-sky-500 hover:bg-sky-700">保存</button>

常用状态变体

hover — 鼠标悬停

<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2">
  悬停变色
</button>

focus — 获得焦点

表单元素被点击或 Tab 选中时的状态：

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

active — 按下瞬间

鼠标按下还没松开的那一刻：

<button class="bg-green-500 active:bg-green-700 active:scale-95">
  按我
</button>

disabled — 禁用状态

<button class="bg-gray-300 text-gray-500 cursor-not-allowed" disabled>
  禁用按钮
</button>

或者用 disabled: 前缀控制样式：

<button class="bg-blue-500 disabled:bg-gray-300 disabled:cursor-not-allowed" disabled>
  提交
</button>

visited — 链接已访问

<a href="#" class="text-blue-600 visited:text-purple-600">链接</a>

结构性伪类

first / last — 第一个/最后一个子元素

<ul>
  <li class="border-t first:border-t-0">第一项（无上边框）</li>
  <li class="border-t">第二项</li>
  <li class="border-t">第三项</li>
</ul>

odd / even — 奇偶行

表格斑马纹：

<tr class="odd:bg-white even:bg-gray-50">

only — 唯一子元素

<div class="space-y-2">
  <p class="only:mb-0">如果只有一个 p，去掉底部间距</p>
</div>

表单状态

checked — 选中状态

<input type="checkbox" class="checked:bg-blue-500 checked:border-blue-500">

placeholder — 占位符样式

<input placeholder="请输入" class="placeholder:text-gray-400 placeholder:italic">

required / optional — 必填/选填

<input required class="required:border-red-300">

组合变体

多个前缀可以叠加，实现复杂条件：

<button class="dark:lg:data-current:hover:bg-indigo-600">
  深色模式 + 大屏幕 + 有 data-current 属性 + 悬停
</button>

编译后的 CSS 大致是：

@media (prefers-color-scheme: dark) and (width >= 64rem) {
  button[data-current]:hover {
    background-color: var(--color-indigo-600);
  }
}

基于父元素状态：group-*

鼠标悬停在父元素上，改变子元素样式：

<a href="#" class="group">
  <h3 class="group-hover:text-blue-600">标题</h3>
  <p class="group-hover:underline">描述文字</p>
</a>

给父元素加 group 类，子元素用 group-* 前缀响应父元素状态。

同样支持 group-focus、group-active 等。

基于兄弟元素状态：peer-*

类似 group-*，但是基于前面的兄弟元素：

<input class="peer" type="checkbox">
<label class="peer-checked:text-green-600">选中后我变绿</label>

peer 标记前面的元素，后面的元素用 peer-* 响应它的状态。

自定义变体

v4 支持用 @custom-variant 创建自定义变体：

@custom-variant card-active (&[data-state="active"]);

然后就能用 card-active:border-blue-500 了。

下一章我们学响应式设计。