[!info] related notes

• 所属：布局与响应式
• 相关：响应式布局 · 伪类状态 · 暗色

Tailwind 状态与响应式变体

这个概念为什么出现

同一按钮需要默认/hover/disabled、md 以上更宽、dark 配色。变体前缀把条件组合成可扫描的设计 API。

[!abstract] 一句话理解 md:hover:bg-blue-600 是“条件 → 工具类”的复合表达，最终编译为普通 CSS。

示例

<button
  type="button"
  class="rounded-lg bg-blue-600 px-3 py-2 text-white hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 disabled:cursor-not-allowed disabled:opacity-50 md:px-4"
>
  导出库存
</button>

原则

• 移动优先：无前缀类在所有尺寸生效；md: 在达到断点后覆盖对应属性，默认 v4 为 48rem，可由主题修改
• 焦点样式保留（键盘用户）
• 条件选择完整类名；扫描器不会把 bg-${color}-600 推导成完整类
• dark 策略先定再铺变体

示例没有 disabled 属性，默认仍可交互；只有原生按钮实际禁用时 disabled:* 才匹配。aria-disabled="true" 不会自动禁用按钮，也不匹配 :disabled。键盘焦点样式需在实际背景、缩放和高对比度环境检查。

v4 的 hover: 默认还受设备支持 hover 的媒体条件限制；响应式断点不是设备类型判断。

本节总结

变体让状态与断点进入同一套 API，但可访问性不能省。

自测题

1. 为什么常用 focus-visible 而不是只 focus？

参考答案

:focus-visible 使用浏览器对“是否需要显示焦点提示”的判断，常适合键盘操作，但不是严格的键盘 / 鼠标检测器；文本输入等元素在点击后也可能匹配。

参考

• Tailwind 状态变体
• 响应式设计