tailwind 的 shadow- 类是 box-shadow 的封装，如 shadow-sm 对应 0 1px 2px 0 rgb(0 0 0 / 0.05)，支持自定义 shadow-[...]、多阴影、inset 及性能优化建议。
box-shadow 的基础写法和 Tailwind 对应关系
Tailwind 的 shadow- 工具类本质就是封装好的 box-shadow 值，不是新语法，也不改渲染逻辑。直接写 CSS 的 box-shadow: 0 2px 4px rgba(0,0,0,0.1) 和用 shadow-sm 效果一致，只是后者更省事。
关键在理解参数顺序：水平偏移、垂直偏移、模糊半径、扩散半径、颜色。Tailwind 的 shadow-sm 对应 0 1px 2px 0 rgb(0 0 0 / 0.05)（注意是现代 rgba 写法），shadow-md 是 0 4px 6px -1px，负的扩散值会让阴影更“贴边”，这是容易忽略的细节。
-
shadow-none是box-shadow: none，别用shadow-0—— 它不存在 - 自定义阴影必须用
shadow-[...]（注意中括号），比如shadow-[0_8px_16px_rgba(0,0,0,0.15)] - 多个阴影用逗号分隔：
shadow-[0_2px_4px_rgba(0,0,0,0.1),_0_-2px_4px_rgba(255,255,255,0.8)]，模拟浮雕感
为什么 shadow-lg 看起来比预期“重”或“糊”
默认的 shadow-lg 是 0 10px 15px -3px + 0 4px 6px -2px 双层阴影，模糊值大、还有负扩散，视觉上压得低、边缘虚化强。在浅色背景或小尺寸元素上容易显得脏。
这不是 bug，是设计意图——它面向卡片、模态框这类需要明确“抬升感”的组件。但用在按钮或输入框上就过重。
- 轻量替代：优先试
shadow（中等）或shadow-sm（最轻） - 调颜色比调大小更有效：比如把默认黑灰改成
shadow-[0_2px_4px_rgba(0,0,0,0.08)] - 高对比度界面慎用深色阴影，改用浅色叠加：
shadow-[0_1px_2px_rgba(255,255,255,0.5)]
实现立体感不能只靠 box-shadow
纯阴影只能模拟“被光照亮的轮廓”，要真立体，得配合其他视觉线索：明暗过渡、边缘高光、微小位移。Tailwind 单靠 shadow- 类做不到这点。
常见误区是堆叠多层阴影想“加厚”，结果模糊叠加反而变平。真正有效的做法是控制光影方向一致性 + 元素自身明暗变化。
- 加内阴影模拟凹陷：
inset必须显式写进shadow-[...]，如shadow-[inset_0_1px_2px_rgba(0,0,0,0.1)] - 配合
bg-gradient-to-b模拟顶部亮、底部暗的自然受光 - 按钮按压效果：用
active:translate-y-0.5+active:shadow-sm缩小阴影，比单纯变色更可信
自定义 shadow 时的兼容性和性能坑
shadow-[...] 是 Tailwind 3.0+ 的 JIT 功能，老版本不支持；而且它依赖 CSS 自定义属性解析，Safari 15.4 以下对复杂 box-shadow 值支持不稳定，尤其含多个 rgba 或 inset 时。
性能上，模糊半径 >12px 的阴影会触发全图高斯模糊，滚动/动画中明显掉帧。不是所有“立体”都值得牺牲流畅度。
- 上线前务必在 Safari 和低端安卓机实测
shadow-[0_20px_30px_rgba(0,0,0,0.2)]类效果 - 避免在
:hover或@keyframes中动态切换大阴影，改用transform+ 微调现有阴影 - 如果设计稿要求“金属拉丝”或“玻璃折射”级立体感，box-shadow 就不是合适工具——该切 SVG 或 canvas
立体感的核心从来不是阴影多深，而是光从哪来、打在什么材质上。Tailwind 给你快捷键，但光源方向得你自己定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
