移动端浏览器不支持 :hover 伪类，因触控设备无悬停物理动作；需用 active: 类提供瞬时反馈，或 js 控制 is-hovered 类实现“已悬停”状态。
因为移动端浏览器压根不实现 :hover 伪类——这不是 Tailwind 的问题，也不是你写错了类名，而是 iOS Safari、Chrome for Android 等主流移动浏览器在规范层面就放弃了悬停状态。
为什么 :hover 在手机上完全不触发
触控设备没有“悬停”这个物理动作。手指划过屏幕时，浏览器无法区分是准备点击、滑动还是误触，所以干脆不匹配 :hover 规则。你在 DevTools 里看到 hover:bg-blue-500 被划掉，不是 CSS 没生成，而是浏览器连选择器都不去试。
-
@media (hover: hover) and (pointer: fine)是唯一合规的启用条件，Tailwind 不内置，必须手写 CSS 块包裹hover:规则 - 别用
ontouchstart判断设备类型——iOS 17+ 和桌面 Chrome 都可能返回 true，误判率高 -
active:只在“按下未松开”瞬间生效，松手就回退，不能替代hover:的持续反馈
hover: 类已存在但没效果的常见原因
即使 DOM 上写了 hover:bg-red-500，也可能因上下文阻断而失效：
- 父容器或遮罩层设置了
pointer-events: none，直接掐断事件流（检查 computed styles） - 卡片或按钮的父容器有
overflow: hidden，把hover:-translate-y-1的位移区域裁掉了 - 元素是 inline 默认行为（如
<span></span>），没尺寸也没交互区，加inline-block或block才行 - 没配基础样式：
hover:bg-blue-500必须搭配bg-gray-100这类默认背景才可过渡
如何让悬停逻辑在移动端真正可用
靠伪类不行，得换思路：
- 对按钮等可点击元素，用
active:scale-95 active:opacity-90提供瞬时反馈（持续 ≤ 150ms） - 需要“已悬停”视觉锚点？用 JS 控制
is-hovered类，监听touchstart+touchend或focus/blur - 若必须复用 Tailwind 工具类，把高频组合加入
safelist，比如/hover:bg-[a-z]+-500/ - Shadow DOM 场景下，外部
tailwind.css进不去，得手动 fetch 并注入到shadowRoot中
真正卡住人的永远是布局层级、事件拦截和构建扫描这些上下文，不是 hover: 本身。先确认 :hover 是否被浏览器激活（看 DevTools 的 Styles 面板有没有匹配规则），再往下查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
