hover:shadow-xl没反应主因是卡片未触发层叠上下文，需加relative、避免父容器overflow:hidden，并配transition-shadow和基础阴影shadow-md才能稳定生效。
hover:shadow-xl 为什么没反应
直接写 hover:shadow-xl 却没提升效果，大概率是卡片本身没「触发层叠上下文」。Tailwind 的阴影依赖 z-index 和渲染层级，而默认卡片（比如纯 div）在无定位、无 z-index、无 transform 时，阴影可能被父容器裁剪或视觉上不明显。
- 确保卡片有
relative或position: relative—— 这是最轻量的触发方式 - 检查父容器是否设置了
overflow: hidden，它会直接裁掉溢出的阴影 -
shadow-xl在深色背景上对比弱，建议搭配bg-white或浅灰底色观察效果
transition 必须配哪些属性才平滑
只写 transition 是不够的，Tailwind 默认的 transition 类只作用于所有可动画属性，但阴影变化（box-shadow）需要显式声明，否则 hover 瞬变、无过渡。
- 必须用
transition-shadow（Tailwind v3.2+）或transition-all—— 前者更精准、性能更好 - 避免用
transition单独出现，它等价于transition-all duration-300 ease-cubic-bezier(0.4,0,0.2,1)，但老版本可能不包含box-shadow在默认列表里 - 如果要控制速度，加
duration-300或duration-500；缓动推荐ease-out，比默认贝塞尔更自然
实际可用的最小卡片类组合
下面这组 class 能在绝大多数场景下稳定生效，已排除常见裁剪、层级、响应延迟问题：
class="relative bg-white rounded-lg p-4 shadow-md hover:shadow-xl transition-shadow duration-300 ease-out"
-
relative：建立局部层叠上下文，让shadow-xl不被父级遮挡 -
shadow-md：提供基础阴影作为 hover 基准，避免从「无影」到「强影」的突兀感 -
hover:shadow-xl：提升感核心，比shadow-lg更明显，但不会过度膨胀 - 不用
transform: scale(1.02)类——虽然能加强悬浮感，但会触发重排，且在 flex/grid 容器中可能破坏布局对齐
暗色模式下阴影失效怎么办
如果你启用了 Tailwind 的暗色模式（dark: 变体），shadow-xl 在深色背景上几乎不可见，不是 bug，是设计使然：阴影本质是「模拟光线投射」，在暗背景下缺乏参照。
- 不要强行给暗色模式加更黑的阴影（如
dark:shadow-2xl），那只会变成一团糊 - 改用明暗反差策略：
dark:bg-gray-800 dark:shadow-lg dark:hover:shadow-xl，同时降低基础阴影强度 - 更稳妥的做法是换思路：暗色模式下用
dark:hover:border-indigo-500 dark:hover:ring-2 dark:hover:ring-indigo-500/30替代纯阴影，视觉提示更可靠
真正难调的不是 class 组合，而是阴影在不同背景亮度、不同设备像素比下的感知一致性——哪怕加了 transition，移动端 touch 事件的 hover 模拟也常有延迟或不触发，这点没法靠 CSS 解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
