shadow-md 与 shadow-lg 的差异在于模糊半径、偏移和透明度组合，后者视觉上更“浮起”；常见不可见原因是无背景色、父容器 overflow-hidden、元素无高度或滤镜干扰。
shadow-md 和 shadow-lg 的实际渲染差异在哪
两者本质都是通过 box-shadow CSS 属性实现，但预设值不同：shadow-md 是 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)，shadow-lg 更重： 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)。关键区别不在“大小”，而在模糊半径、偏移和透明度组合——shadow-lg 在视觉上更“浮起”，但对浅色背景可能显得过重。
为什么加了 shadow-lg 却看不到投影
常见原因不是类名写错，而是元素本身没满足投影生效的前提：
- 元素必须有非透明的背景（
bg-white、bg-gray-50等），纯透明背景（如默认div）会让阴影“透底”不可见 - 父容器设置了
overflow: hidden（比如rounded-xl overflow-hidden），会裁剪掉阴影区域 - 元素没有设置高度或内容撑开，导致实际渲染为 0 高度，阴影无处附着
- 使用了
backdrop-blur或filter: blur()等滤镜，可能干扰阴影渲染（尤其 Safari）
如何自定义 shadow 值而不脱离 Tailwind 工作流
直接写内联 style="box-shadow: ..." 会绕过 PurgeCSS，且难维护。推荐两种方式：
- 在
tailwind.config.js的theme.boxShadow中扩展：添加'custom-strong': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)'，然后用shadow-custom-strong - 用
@layer utilities定义原子类：@layer utilities { .shadow-bare { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); } }，后续可直接写shadow-bare
深色模式下 shadow 类的兼容性问题
Tailwind 默认的 shadow-* 类用的是固定 rgba(0,0,0,0.X)，在深色背景上会发灰甚至看不见。解决方法不是禁用，而是主动适配：
- 用
dark:shadow-gray-800/20替代默认值（需确保已启用darkMode: 'class'并在根节点加dark类） - 避免依赖
shadow-lg表达“重要性”，改用ring-2 ring-blue-500等更可控的强调方式 - 测试时别只看 Light 模式 ——
shadow-md在深灰背景（bg-gray-900）上几乎不可见，这是设计使然，不是 bug
Tailwind 的 shadow 类是快捷方式，不是魔法；真正影响效果的是背景、层级、父容器约束这三个现实条件，而不是类名本身有多“大”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
