移动端无真正:hover状态，因触控设备缺乏悬停物理动作；应使用@media (hover: hover) and (pointer: fine)精准检测支持悬停的设备，而非依赖ontouchstart或active伪类。
移动端根本就没有:hover状态
不是Tailwind写错了，也不是你漏写了类名，而是 iOS Safari、Chrome for Android 等主流移动浏览器压根不实现真正的 :hover。触控设备没有“悬停”这个物理动作，浏览器无法可靠判断手指是准备点击还是划过——所以它选择不触发，或只在首次点击后短暂模拟一次，之后就失效。你在 DevTools 里看到 hover:bg-blue-500 被划掉，大概率不是 CSS 没编译，而是伪类本身没被激活。
@media (hover: hover) and (pointer: fine) 是唯一靠谱的检测方式
别用 ontouchstart 全局判断设备类型，iOS 17+ 和桌面 Chrome 都可能暴露该属性，误判率高。CSS 媒体查询才是标准解法：
-
@media (hover: hover) and (pointer: fine)表示：设备支持悬停 + 指针精度高（即鼠标/触控板），此时才启用 hover 动画 - 对应地，
@media (hover: none), (pointer: coarse)可用于降级样式，比如让下划线默认可见、按钮加:active缩放反馈 - Tailwind 不直接提供这个媒体查询封装，得手写 CSS 块，但可以和工具类共存：
@media (hover: hover) and (pointer: fine) { .card:hover { @apply -translate-y-1 transition-transform duration-300; } }
别指望 active: 在移动端维持状态
active: 在手机上只在“按下未松开”的瞬间生效，松手立刻回退。它不能替代 hover 的持续反馈，也不适合做开关类交互的视觉锚点。
- 常见错误：给按钮写
active:bg-gray-200就以为用户能感知按压态——实际体验中常因延迟或快速滑动而丢失 - 更稳妥的做法是组合使用：
:active加轻微缩放 +opacity微调，同时确保父容器没设overflow: hidden截断变换区域 - 如果必须维持“已点击”状态，请用 JS 控制 class（如
is-active），而不是依赖伪类
真正卡住人的永远是上下文，不是 hover 本身
你写的 hover:-translate-y-1 没反应，90% 的概率不是 Tailwind 问题，而是：overflow: hidden 的父容器剪掉了位移区域；卡片没设 position: relative 导致 z-index 失效；或者你正在调试的页面根本没开 JIT 模式，新写的 hover 类压根没进编译结果。移动端的限制只是表象，背后全是布局、编译、层级这些老问题在借壳出现。
立即学习“前端免费学习笔记（深入）”；
