为什么Tailwind CSS的hover状态不触发的深层原因是什么？

本文共计985个文字，预计阅读时间需要4分钟。

最常被忽略的，不是写法错误，而是Tailwind根没把hover:bg-blue-500编译进CSS里。JIT模式下，它只扫描你项目中实际出现的类名；动态拼接（如class={${isHover ? 'hover:text-red-500' : ''}}）或服务端渲染时未预加载的类，通常会被purge掉。

验证方法：打开浏览器DevTools → Elements → 选中目标元素 → Styles面板里搜:hover，看有没有对应规则。没有？说明断点在配置或HTML内容上。

• 检查tailwind.config.js中content路径是否覆盖到当前文件（尤其注意Vue/React组件、MDX、动态模板）
• 确认没误启mode: 'aot'（AOT模式不支持运行时新增类）
• 别用hoever:或hover:漏冒号——这种拼写错误不会报错，但也不会生成任何CSS

父级pointer-events: none会彻底禁用子元素hover

哪怕hover:类已正确生成，只要父容器（甚至祖父级）设置了pointer-events: none，子元素的hover:就完全失效——这是CSS规范行为，不是Tailwind bug。

典型场景：遮罩层、模态框背景、动画过渡容器、某些UI库的Portal包裹层。