Tailwind 的 hover:shadow-lg 发灰不发光，因其默认值模糊小、透明度低；需用 @layer components 自定义 shadow-glow 类，叠加三层 box-shadow 实现发光效果，并为深色模式和移动端适配。
hover:shadow-lg 不够亮？默认阴影太淡
Tailwind 的 shadow-lg 在悬停时往往显得发灰、不“发光”，尤其在浅色背景上缺乏视觉冲击。这不是 bug，而是设计取向：Tailwind 的 shadow 工具类基于固定 box-shadow 值，shadow-lg 对应的是 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) —— 模糊半径小、透明度低、无高亮色层，本质是“柔和投影”，不是“发光”。
要真正实现悬浮发光效果，必须绕过预设类，用自定义 box-shadow 覆盖：
- 至少叠加两层阴影：一层内发光（
inset+ 高透明度亮色）、一层外扩散光晕（大模糊 + 低透明度白/蓝） - 避免用纯白
rgba(255,255,255,0.8)，容易过曝；推荐rgba(255,255,255,0.3)或带色相的rgba(199, 210, 254, 0.5)（类似 Focus ring 的 indigo-300） - 务必加
transition-shadow，否则光效突兀；建议duration-300起步
用 @layer 指令安全注入自定义发光类
直接写 class="hover:shadow-glow" 会报错，因为 shadow-glow 未注册。正确做法是在 @layer components 中声明：
@layer components {
.shadow-glow {
@apply transition-shadow duration-300;
}
.shadow-glow:hover {
box-shadow:
0 0 0 4px rgba(199, 210, 254, 0.3),
0 10px 25px -5px rgba(199, 210, 254, 0.3),
0 8px 10px -6px rgba(199, 210, 254, 0.2);
}
}
关键点：
- 第一层
0 0 0 4px是关键：模拟“光晕边框”，让卡片边缘有明确发光轮廓 - 第二层控制主光晕范围（
25px模糊）和强度（0.3透明度），比 Tailwind 默认的shadow-xl更飘、更亮 - 第三层压暗底部过渡，避免阴影“浮空”，提升真实感
- 不要在
@layer utilities里声明，否则可能被 PurgeCSS 误删
深色模式下发光色要反向调整
同一套 rgba(199, 210, 254, 0.3) 在深色背景上会变灰、失去发光感。必须配合 dark: 变体重写颜色值：
.shadow-glow:hover {
box-shadow:
0 0 0 4px rgba(199, 210, 254, 0.3),
0 10px 25px -5px rgba(199, 210, 254, 0.3),
0 8px 10px -6px rgba(199, 210, 254, 0.2);
}
.dark .shadow-glow:hover {
box-shadow:
0 0 0 4px rgba(147, 197, 253, 0.5),
0 10px 30px -5px rgba(147, 197, 253, 0.4),
0 8px 12px -6px rgba(147, 197, 253, 0.3);
}
注意变化：
- 亮度提高：深色模式下把 alpha 从
0.3提到0.5，否则看不见 - 色相微调：从
indigo-300（199,210,254）换成更亮的blue-300（147,197,253），避免发紫 - 模糊加大：第二层模糊从
25px到30px，增强扩散感
移动端慎用，避免触发滚动条抖动
大模糊值（如 30px）在 iOS Safari 上可能引发渲染抖动，尤其卡片靠近视口边缘时。若用户反馈“悬停后页面跳动”，大概率是这个原因。
临时缓解方案：
- 给卡片父容器加
overflow-hidden，裁掉溢出阴影 - 改用更保守的模糊值：
15px替代30px，牺牲一点光感换稳定性 - 对
md:及以上断点启用发光，移动端降级为hover:shadow-md
真正发光的代价是渲染开销——越亮、越扩散，浏览器重绘压力越大。别为了视觉爽感，在低端安卓机上让 box-shadow 超过三层或模糊总和超 50px。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
