Tailwind 状态与响应式变体

说明 hover/focus/响应式/暗色等变体前缀如何映射到 CSS 伪类与媒体查询，并给出可访问性注意点。

#type / concept #status / growing #tech / dev / frontend #resource / css

[!info] 关联笔记

所属：布局与响应式

相关：响应式布局 · 伪类状态 · 暗色

Tailwind 状态与响应式变体

这个概念为什么出现

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

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

示例

<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: 增强
焦点样式保留（键盘用户）
动态拼接类名要可被扫描
dark 策略先定再铺变体

本节总结

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

自测题

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

参考答案

更好地区分键盘焦点与鼠标点击焦点，减少不必要的焦点环干扰（仍需保证键盘可见性）。