<p>按钮 hover 颜色未变需检查 class 覆盖或顺序错误，确保 hover:bg- 与 hover:text- 同时使用并添加 transition-colors；区分主/次/危险按钮色板；补充 active: 和 focus-visible: 以支持移动端和键盘导航。</p>
按钮 hover 时颜色没变？检查 class 是否被覆盖或顺序错误
Tailwind 的 hover:bg-blue-500 类只有在元素处于悬停状态且未被更高优先级样式覆盖时才生效。常见原因是：自定义 CSS 中写了 .btn { background-color: #ccc !important; }，或者 Tailwind 的 class 写在了内联 style 后面（CSS 层叠顺序导致失效）。
实操建议：
- 用浏览器开发者工具检查按钮元素，看
hover:bg-*对应的规则是否被 strike-through（划掉） - 确保所有 Tailwind 类都在同一 class 字符串中，不要拆成多个
class=""属性 - 避免在项目中混用
!important或全局重置按钮样式的 CSS
想让文字和背景色同步变化，必须同时加 text 和 bg 的 hover 类
Tailwind 不会自动联动文字与背景色——hover:bg-red-500 只改背景，hover:text-white 才改文字颜色。漏掉任一，就会出现“红底黑字”这种可读性差的情况。
示例写法（推荐）：
立即学习“前端免费学习笔记（深入）”；
button class="bg-gray-200 text-gray-800 hover:bg-red-500 hover:text-white px-4 py-2 rounded transition-colors"
注意点：
-
transition-colors必须显式添加，否则颜色切换是瞬切，无渐变效果 - 基础态的
text-*和bg-*要与 hover 态语义一致（比如浅底配深字，深底配浅字） - 如果用了
disabled状态，记得补充disabled:bg-gray-300 disabled:text-gray-500
不同按钮类型需要不同色板组合，别硬套同一套 class
主按钮、次要按钮、危险操作按钮的视觉权重不同，不能全用 hover:bg-blue-500。Tailwind 的 color scale 是有语义的：blue-500 是主色调，red-500 表示警告/删除，emerald-500 更适合成功类操作。
常用组合参考：
- 主操作按钮：
bg-blue-600 hover:bg-blue-700 text-white hover:text-white - 边框按钮：
border border-blue-500 text-blue-500 hover:bg-blue-50 hover:text-blue-700 - 危险按钮：
bg-red-100 text-red-700 hover:bg-red-200 hover:text-red-800
性能提示：这些类都是原子化生成的，不会增加体积——Tailwind 在构建时只打包你实际用到的 class。
移动端点击反馈弱？补上 active 类和 focus-visible
仅靠 hover 在手机上基本无效（没有鼠标悬停），用户点击后缺乏视觉反馈。必须补充 active: 和 focus-visible: 变体。
安全写法（兼顾可访问性和触控体验）：
button class="... hover:bg-blue-700 active:bg-blue-800 focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none"
关键说明：
-
active:在手指按下的瞬间触发，模拟“按下”效果 -
focus-visible:仅当键盘导航聚焦时显示环形焦点（不影响鼠标用户） - 去掉
outline-none会破坏可访问性，务必搭配focus-visible:使用
真正容易被忽略的是：很多人只写 hover，却忘了移动端和键盘用户的交互路径完全不同——颜色变化不是炫技，是传达状态。
