hover:shadow-lg没反应的主因是tailwind.config.js未启用shadow变体，需在variants.extend.shadow中添加['hover']；其次阴影常被父容器overflow:hidden裁切或移动端无hover状态导致失效。
为什么 hover:shadow-lg 没反应？检查是否启用了阴影插件
Tailwind 默认不启用所有阴影类，shadow-lg 和 hover:shadow-lg 需要确保 plugins 数组里包含 require('tailwindcss/plugin')('tailwindcss/nesting') 并且核心插件已加载——但更常见的是：你没在 tailwind.config.js 中显式启用 shadow 变体。默认配置下，hover 变体只对部分工具类生效，shadow 类需手动添加变体支持：
- 打开
tailwind.config.js - 在
module.exports的variants（v2）或variants: { extend: {} }（v3+）中加入：shadow: ['hover', 'focus'] - v3.3+ 推荐写法：
module.exports = { content: [...], theme: { ... }, plugins: [], variants: { extend: { shadow: ['hover'] } } }
hover:shadow-xl 太重？用自定义阴影值控制强度和偏移
内置的 shadow-sm 到 shadow-2xl 是预设组合（模糊 + 偏移 + 颜色），但悬浮时往往需要更细腻的过渡——比如轻微上浮感 + 更柔和的阴影。直接覆盖 box-shadow 更可控：
- 在
@layer utilities或 CSS 文件中加：@layer utilities { .shadow-hover-up { @apply transition-all duration-200; } .shadow-hover-up:hover { box-shadow: 0 -4px 12px -4px rgba(0, 0, 0, 0.1); } } - 关键点：
0 -4px让阴影出现在卡片上方，制造“上浮”错觉；-4px的 spread 值收窄阴影范围，避免发虚 - 别用
shadow类叠加自定义box-shadow，CSS 优先级会冲突，浏览器只会取后者
卡片悬停时内容被阴影遮挡？调整 z-index 和层级顺序
阴影是绘制在元素“下方”的，但如果卡片父容器有 overflow: hidden，或者兄弟元素 z-index 更高，阴影就会被裁切或盖住。这不是 Tailwind 的 bug，是层叠上下文问题：
- 给卡片本身加
relative z-10（数值比周围元素高即可，不一定要 50） - 确认父容器没有
overflow: hidden—— 特别是网格/弹性布局容器，常被误加 - 如果卡片在
absolute定位的弹出层里，需确保该弹出层的z-index足够高，否则阴影会落在弹出层之下 - 移动端 Safari 对
box-shadow渲染有轻微偏移，若发现阴影位置不准，加transform: translateZ(0)强制硬件加速（用will-change: transform更轻量）
响应式悬停失效？触摸设备没 hover 状态
iOS 和 Android 默认不触发 :hover，所以 hover:shadow-lg 在真机上基本无效。不能只靠 CSS 响应式解决，得结合交互逻辑：
立即学习“前端免费学习笔记（深入）”；
- 用
group+group-hover不行，它同样依赖伪类 hover - 实际方案：监听
touchstart给卡片加临时 class，例如is-hovered，再写.is-hovered { box-shadow: ... } - 更省事的做法：对移动设备降级，用
focus-within（配合可聚焦子元素如按钮/链接）或直接移除悬停效果，改用点击反馈（active:scale-95） - 检测方式：不要用
prefers-reduced-motion，它管的是动画偏好，不是设备类型；可用@media (hover: hover) and (pointer: fine)包裹 hover 类（Tailwind v3.3+ 支持）
