hover:bg-blue-500 无效是因为缺少基础背景类，必须搭配如 bg-gray-100 才生效；元素需可交互、有尺寸、pointer-events 正常，且 transform 需配合 transition 才动画，移动端应改用 active 或 focus-within。
直接写 hover:bg-blue-500 没反应，不是 Tailwind 写错了，而是你漏了基础样式、元素不可交互，或浏览器根本不支持 hover。
hover 类必须搭配默认状态类才生效
Tailwind 的 hover: 是修饰符，不是独立样式。它只生成 :hover 伪类规则，但前提是元素本身有对应的基础属性值可“变”。
-
hover:bg-blue-500单独加在空<div>上，完全没效果——因为没定义初始bg-类，CSS 无从过渡 - 正确写法是：
bg-gray-100 hover:bg-blue-500（先给默认背景，再定义悬停态） - 同理，
hover:text-red-400要配合text-gray-700；hover:border要先有border或border-gray-300 - 颜色体系要一致：别混用
bg-opacity-20和hover:bg-blue-500，透明度丢失会导致变色突兀
元素得能真正被悬停到
很多“没反应”其实是触发条件不满足，尤其在移动端或复杂布局中。
-
pointer-events: none在父级或自身上存在，会彻底禁用 hover —— 检查 computed styles 里的pointer-events - 行内元素如
<span>默认无尺寸，悬停区域为 0；加inline-block或block才有响应区 -
<a>标签受浏览器默认:visited样式干扰，建议加text-decoration-none或重置outline - 按钮（
<button>）在部分浏览器中默认appearance: button，可能掩盖背景色变化，可加bg-transparent显式控制
transform 类（如 scale/translate）必须配 transition 才动起来
hover:scale-105 或 hover:-translate-y-1 写了却“瞬间跳变”，是因为 Tailwind 不自动给 transform 属性加过渡。
立即学习“前端免费学习笔记（深入）”；
- 必须显式加
transition-transform duration-300 ease-out（推荐只过渡 transform，性能好） - 别用
transition简写——它等价于transition: all，会拖慢响应，且可能意外触发动画其他属性 -
duration-300必须写在常态元素上，不能只写在hover:duration-300里，否则离开时无动画 - inline 元素不支持
transform，缩放无效；加inline-block或block是前提
移动端别指望 hover，改用 active 或 focus-within 降级
iOS Safari 和多数安卓 WebView 基本不支持 hover：首次点击可能模拟一次，之后就失效，甚至卡在悬停态。
- 纯按钮交互，优先用
active:scale-95模拟按下反馈 - 需要悬停+点击双模式，用
group+group-hover:，包裹容器加focus-within:或监听tabindex - 表单控件（输入框、下拉）别依赖 hover 边框，改用
focus:border-blue-500或focus-visible:ring-2 - 别靠
@media (hover: hover)切换——Tailwind 当前不支持该媒体查询的响应式变体，且微信 WebView 等会忽略它
最常被忽略的点：父容器 overflow-hidden 会裁掉 hover:-translate-y 的位移，而 transform-origin 在嵌套变换中容易被覆盖——这些都不是 Tailwind 的问题，是 CSS 层叠和渲染机制本身的限制。
