悬停样式失效主因是交互链路断裂而非tailwind写错：移动端无hover物理动作、shadow dom隔离样式、动态类名未被构建扫描、父容器pointer-events:none阻断事件。
悬停样式失效，90% 不是 Tailwind 写错了，而是它根本没机会生效——:hover 在移动端不触发、在 Shadow DOM 里被隔离、在动态拼接类名时压根没进 CSS 文件、或父容器用 pointer-events: none 直接掐断了事件流。
为什么 :hover 在手机上完全没反应
触控设备没有“悬停”这个物理动作，iOS Safari 和 Chrome for Android 压根不实现 :hover 伪类。你看到 hover:bg-blue-500 在 DevTools 里被划掉，不是类没生成，而是浏览器连匹配都不匹配。
-
@media (hover: hover) and (pointer: fine)才是唯一合规的启用条件，Tailwind 不内置，必须手写 CSS 块包裹hover:规则 - 别指望
active:持续替代hover:——松手就回退，无法维持状态 - 给按钮加
touch-action: manipulation可提升点击响应，但不解决悬停持续问题 - 若需“已悬停”视觉锚点，用 JS 控制
is-hovered类，而不是赌伪类
为什么 DOM 里有 hover:bg-red-500 却没效果
Tailwind 是构建时扫描静态类名，不是运行时解析字符串。你写的类名如果没出现在 content 配置覆盖的文件里，它就不会进最终 CSS —— 浏览器查不到规则，自然不生效。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
content必须精确匹配源码路径，比如 React + TSX 项目要写成["./src/**/*.{js,jsx,ts,tsx}"]，漏掉.tsx或嵌套目录就全丢 - 动态拼接类名如
className={`p-4 ${isRed ? 'bg-red-500' : ''}`}，构建时看不到完整字符串，bg-red-500不会被提取 - 解决办法只有两个：
safelist显式声明（支持正则，如/bg-[a-z]+-500/），或把高频组合预定义为常量对象 - Vite / Webpack 项目还要确认 PostCSS 插件已加载
@tailwindcss/postcss，否则@tailwind utilities就是注释
为什么 Shadow DOM 里的 hover: 完全失灵
Shadow DOM 的样式隔离机制会天然阻断外部 CSS 匹配。哪怕你写了 hover:scale-105，DOM 上 class 存在，浏览器也找不到对应规则——因为外部 tailwind.css 的全局选择器进不去 shadowRoot。
- 必须手动注入完整编译后的 CSS 到
shadowRoot，用fetch('/tailwind.css').then(r => r.text())读取再创建<style></style>插入 - 注入时机很关键：必须在
shadowRoot创建之后、元素挂载之前（例如connectedCallback里） - 即使注入成功，如果
tailwind.config.js的content没覆盖到模板字符串（如 Lit 的html`<div class="hover:scale-105"></div>`），JIT 引擎也不会生成那条规则 -
@apply和css``同样无效——它们只是复用外部 CSS，不产生新规则
为什么鼠标移上去没变化，但检查器显示类名已存在
类名在 DOM 上，CSS 规则也在，但就是不生效——这时候问题一定出在上下文链路上，不是 Tailwind 本身。
- 父容器设了
overflow: hidden？hover:-translate-y-1位移可能被直接剪掉 - 父级有
pointer-events: none（常见于遮罩层）？子元素所有hover全部静音 - 元素是
<span></span>或<div> 且没设 <code>display？行内元素默认不响应width/height，背景色“显形”失败 - 用了
transform但没触发硬件加速？某些 Chrome 版本下悬停区域错位，加will-change: transform临时修复
真正卡住人的永远不是 hover: 这个前缀，而是它所依赖的整个交互链路：设备能力、DOM 层级、构建配置、样式作用域——任何一个环节断了，它就静默失效，且毫无报错。
