Tailwind CSS 状态与变体

前面讲布局时，元素样式是固定的。本篇讲状态变体，让元素在鼠标悬停、获得焦点、被禁用等状态时自动改变外观，这是做交互的基础。

伪类变体

在工具类前加状态前缀，就能让该样式只在对应状态生效。最常用的几个。

<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white px-4 py-2 rounded">
  点我
</button>

按钮默认蓝色，悬停变深，按下更深。disabled 状态常用在表单提交时。

<button class="bg-gray-300 text-gray-500 disabled:bg-gray-200 disabled:cursor-not-allowed" disabled>
  不可用
</button>

group 父状态控制子元素

有时想让「父元素被悬停时，里面的某个子元素变化」。给父元素加 group，子元素用 group-hover: 即可。

<div class="group p-4 border rounded hover:bg-gray-50">
  <p class="text-gray-700">标题</p>
  <span class="text-gray-400 group-hover:text-blue-500">悬停我才变蓝</span>
</div>

鼠标移到整张卡片上，里面的小字才会变蓝，而不需要单独悬停那行字。

group 多实例

页面有多个 group 也不冲突，每个 group 只影响自己内部的 group-hover: 后代。

peer 兄弟状态控制

当一个元素需要根据「前面的兄弟元素」状态变化时使用 peer。常见场景是自定义复选框、开关。

<input type="checkbox" class="peer sr-only" id="toggle">
<label for="toggle" class="block w-12 h-6 bg-gray-300 rounded-full peer-checked:bg-green-500">
</label>

这里 <input> 加了 peer，后面的 <label> 用 peer-checked:bg-green-500，在勾选时变绿。sr-only 把原生勾选框隐藏但保留可访问性。

peer 的其他变体

除了 peer-checked:，还有 peer-focus:、peer-disabled:、peer-invalid: 等，按兄弟元素的状态触发。

实战：表单与按钮交互

下面做一个带交互反馈的登录表单。

<form class="max-w-sm mx-auto p-6 space-y-4">
  <input
    type="text"
    placeholder="用户名"
    class="w-full px-3 py-2 border rounded focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none">
  <input
    type="password"
    placeholder="密码"
    class="w-full px-3 py-2 border rounded focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none">
  <button
    class="w-full bg-blue-500 hover:bg-blue-600 active:bg-blue-700 disabled:bg-gray-300 text-white py-2 rounded"
    disabled>
    登录
  </button>
</form>

输入框聚焦时边框和光环变蓝，按钮有悬停和按下反馈，按钮禁用时变灰。把按钮的 disabled 去掉就能点。

小结

状态变体让样式随交互自动切换：伪类变体管自身，group-hover: 管父控子，peer-* 管兄弟控邻。下一篇讲深色模式，利用 dark: 变体切换整套配色。