<p>hover:bg-blue-500 单独无效，因缺少基础背景色；需搭配 bg-* 使用，且 hover:focus 等复合状态须手动配置启用。</p>
hover:bg-blue-500 为什么没反应
单独写 hover:bg-blue-500 没效果，不是 Tailwind 失效，而是它根本没东西可“变”。hover: 只生成 .hover\:bg-blue-500:hover { background-color: #3b82f6; } 这条规则，但元素本身没定义初始背景色，浏览器无从过渡。
必须搭配基础类一起用：
-
bg-gray-100 hover:bg-blue-500（先有默认背景） -
text-gray-700 hover:text-red-400（文字色同理） -
border border-gray-300 hover:border-blue-500（border 也得先存在）
颜色体系要一致：别混用 bg-opacity-20 和 hover:bg-blue-500，透明度丢失会导致变色突兀或视觉跳变。
focus:ring-2 不生效的常见原因
focus:ring-2 常用于输入框或按钮的焦点反馈，但容易失效，关键在三点：
立即学习“前端免费学习笔记（深入）”；
- 元素必须能获得焦点：普通
<div>默认不可聚焦，需加tabindex="0"；<button>、<a>、<input>天然支持 - 别被
outline: none覆盖：Tailwind 的focus:outline-none是主动移除原生 outline，但若你在其他地方写了全局outline: 0，focus:ring就可能被层叠压制 - 移动端 focus 行为特殊：iOS Safari 在点击后才触发一次 focus，且常与 click 冲突；建议对触摸设备降级为
focus-within:或监听tabindex切换
推荐组合写法：focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 focus:outline-none
想让 hover 和 focus 同时生效怎么办
hover:bg-blue-500 focus:bg-yellow-400 是两个独立状态，浏览器不会同时匹配 —— 它们互斥。真要实现「悬停 + 聚焦」双条件样式，必须启用复合变体。
Tailwind 默认不生成 hover:focus: 这类组合前缀，需手动配置：
- 在
tailwind.config.js的variants（v3）或plugins（v4）中显式启用：require('@tailwindcss/typography')不管用，得加require('@tailwindcss/forms')或自定义插件 - 启用后才能写
hover:focus:bg-indigo-100，对应 CSS 是.hover\:focus\:bg-indigo-100:hover:focus { background-color: #e0d6ff; } - 注意顺序：
focus:hover:bg-无效，必须是hover:focus:bg-（伪类顺序须符合 CSS 规范）
更轻量的替代方案：用 group + group-hover: 包裹容器，再在内部元素上用 focus:，逻辑解耦更可控。
移动端 hover 基本靠不住
iOS Safari 和多数安卓 WebView 对 hover: 支持极差：首次点击可能模拟一次，之后失效，甚至卡在悬停态。这不是 bug，是规范行为。
务实做法是降级：
- 纯操作按钮：优先用
active:scale-95模拟按下反馈 - 需要悬停提示（如 tooltip）：改用
focus-within:+tabindex，或直接上 daisyUI 的纯 CSS tooltip - 表单控件（
<select>、<input>）：禁用hover:，专注focus:和focus-within:
别在响应式断点里混用 md:hover:bg- 和 sm:active: —— 移动端用户根本看不到 hover 效果，只留下一个没意义的 class。
