为什么Tailwind CSS的hover样式失效

hover:bg-blue-500未生效的主因是编译未包含该类，需确认content路径覆盖源码、重新构建并检查output.css；其次排查pointer-events:none拦截、移动端不支持hover、group-hover缺少父级group类或非直接后代。

hover:bg-blue-500写了但没反应，先查编译是否包含该类

Tailwind 默认按需生成 CSS，hover:bg-blue-500 不会自动进最终文件，除非它真实出现在 content 配置路径下的源码中。你改了 HTML 加上这个类，但没重新构建，或构建命令没开 watch 模式，output.css 里压根没有这条规则。

1. 检查编译后的 output.css 文件，搜索 hover:bg-blue-500 或 :hover .bg-blue-500，不存在就说明没被提取
2. 确认 tailwind.config.js 的 content 字段覆盖了你写 class 的文件路径（比如 "./src/**/*.{html,js,ts}"），不是只扫 dist/
3. 开发时必须用 npx tailwindcss -i input.css -o output.css --watch，一次性构建命令不会响应后续 HTML 修改

鼠标悬停了但样式不动，大概率是 pointer-events 被父级截断

哪怕 class 写对、CSS 编译成功，hover: 也依赖事件能穿透到目标元素。常见干扰来自父容器的 pointer-events: none —— 它会让整个子树失去所有鼠标交互能力，包括 hover。

1. 在 DevTools 中选中目标元素 → 右侧 “Computed” 面板搜 pointer-events，看计算值是不是 none
2. 特别注意遮罩层、弹窗背景、动画 wrapper 这些常被设为 pointer-events-none 的容器
3. opacity-0 不影响事件捕获，invisible 也不等于 pointer-events-none，别混淆

移动端 hover 失效不是 bug，是浏览器根本不支持

iOS Safari 和 Android Chrome 压根不实现 :hover 伪类，所以 hover:bg-blue-500 在触屏设备上永远不触发——这不是你代码错，是规范如此。

1. 不要用 ontouchstart 判断是否是移动端，iOS 17+ 和桌面 Chrome 都可能返回 true，误判率高
2. 真正可靠的检测是 @media (hover: hover) and (pointer: fine)，只对鼠标/触控板生效
3. 纯 CSS 场景下，按钮可用 active:bg-blue-600 提供瞬时反馈；需要“持续悬停态”，必须用 JS 控制 is-hovered 类

group-hover 不生效，90% 是父元素漏了 group 类

group-hover: 不是独立功能，它依赖父容器显式声明 group 类来建立作用域。写成 hover:group、group- 或拼错成 gropu 都无效。

1. 父元素 class 必须是干净的 group，不能带冒号、连字符或前缀（除非你在 config 里设了 prefix，那就要同步改成 tw-group）
2. 子元素必须是它的**直接后代**，中间隔一层 React/Vue 组件且没透传 group，就会断链
3. 绝对定位的子元素溢出父容器，可能让鼠标实际悬停在“视觉外区域”，导致 group:hover 不触发

真正卡住人的永远是上下文：编译路径、父级事件拦截、设备能力边界、DOM 层级关系——hover 本身只是个开关，它开不开，从来不由它自己决定。