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 里压根没有这条规则。
- 检查编译后的
output.css文件，搜索hover:bg-blue-500或:hover .bg-blue-500，不存在就说明没被提取 - 确认
tailwind.config.js的content字段覆盖了你写 class 的文件路径（比如"./src/**/*.{html,js,ts}"），不是只扫dist/ - 开发时必须用
npx tailwindcss -i input.css -o output.css --watch，一次性构建命令不会响应后续 HTML 修改
鼠标悬停了但样式不动，大概率是 pointer-events 被父级截断
哪怕 class 写对、CSS 编译成功，hover: 也依赖事件能穿透到目标元素。常见干扰来自父容器的 pointer-events: none —— 它会让整个子树失去所有鼠标交互能力，包括 hover。
- 在 DevTools 中选中目标元素 → 右侧 “Computed” 面板搜
pointer-events，看计算值是不是none - 特别注意遮罩层、弹窗背景、动画 wrapper 这些常被设为
pointer-events-none的容器 -
opacity-0不影响事件捕获，invisible也不等于pointer-events-none，别混淆
移动端 hover 失效不是 bug，是浏览器根本不支持
iOS Safari 和 Android Chrome 压根不实现 :hover 伪类，所以 hover:bg-blue-500 在触屏设备上永远不触发——这不是你代码错，是规范如此。
- 不要用
ontouchstart判断是否是移动端，iOS 17+ 和桌面 Chrome 都可能返回 true，误判率高 - 真正可靠的检测是
@media (hover: hover) and (pointer: fine)，只对鼠标/触控板生效 - 纯 CSS 场景下，按钮可用
active:bg-blue-600提供瞬时反馈；需要“持续悬停态”，必须用 JS 控制is-hovered类
group-hover 不生效，90% 是父元素漏了 group 类
group-hover: 不是独立功能，它依赖父容器显式声明 group 类来建立作用域。写成 hover:group、group- 或拼错成 gropu 都无效。
- 父元素 class 必须是干净的
group，不能带冒号、连字符或前缀（除非你在 config 里设了prefix，那就要同步改成tw-group） - 子元素必须是它的**直接后代**，中间隔一层 React/Vue 组件且没透传
group，就会断链 - 绝对定位的子元素溢出父容器，可能让鼠标实际悬停在“视觉外区域”，导致
group:hover不触发
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
