hover 和 focus 类需满足可交互性、基础样式、修饰符顺序正确三前提，否则无效；hover 依赖初始样式，focus 应配 outline-none 与 ring，修饰符顺序不可颠倒，transition 必须写在常态类中。
hover 和 focus 类不会自动生效，必须满足元素可交互、有基础样式、修饰符顺序正确三个前提，否则写了也白写。
hover:bg-blue-500 没反应？先检查基础类和元素类型
Tailwind 的 hover: 不是独立样式，它只修改“已存在”的同类属性。比如 hover:bg-blue-500 要求元素本身已有 bg- 类（如 bg-gray-100），否则浏览器无初始值可过渡。
- 对
<div> 直接加 <code>hover:bg-blue-500无效：改用<button></button>或加tabindex="0" - 行内元素（如
<span></span>）默认无尺寸，hover 区域为 0：加inline-block或block - 父级或自身有
pointer-events: none：在 DevTools 中检查 computed styles，临时删掉验证 - 移动端 Safari 基本不触发
:hover：别依赖它做核心交互，改用active:或focus-within: - 必须同时写
focus:outline-none和focus:ring-2，缺一不可 -
focus:ring-offset-2要和focus:ring-2成对出现，否则环紧贴边框、视觉上像没生效 - 深色模式下环可能不可见：补上
dark:focus:ring-blue-400 - 鼠标点击输入框时
focus:不触发？那是正常行为——改用focus-visible:更符合可访问性，或统一用focus:并接受鼠标用户看到环 - 想实现“悬停时再聚焦”的效果，写
hover:focus:ring-2，不是focus:hover:ring-2 - 响应式 + hover 不能连写：
md:hover:bg-gray-100是非法语法；要拆成md:bg-gray-50 md:hover:bg-gray-100 -
transition必须写在常态上：transition-colors duration-200放在元素 class 里，不能只写hover:transition-colors - transform 类（如
hover:scale-105）必须配transition-transform，否则是瞬时跳变
focus:ring-2 看不见？outline 和 ring 必须配对清除
原生 outline 和 Tailwind 的 ring 是两套机制，不手动处理就会叠加、偏移甚至被遮挡。
hover:focus:bg-red-500 写法错误？修饰符顺序不能乱
Tailwind 只支持预设的修饰符链，hover:focus: 合法，focus:hover: 直接被忽略。
最容易被忽略的是：hover 和 focus 都依赖浏览器对“可交互元素”的判定，而不是你主观认为“它看起来能点”。一个没 tabindex 的 <div>，哪怕加了 <code>cursor:pointer，在多数浏览器里 hover 也不会触发——这不是 bug，是规范。
