shadow-md等内置类不适用于ui规范，因其y偏移固定为正、x偏移恒为0，方向不可控且参数不可拆解；而ui规范要求精确控制方向、扩散半径、模糊大小和颜色透明度。
不能靠 shadow-md 这类内置类实现规范化的投影系统——它们固定 y 偏移为正、x 偏移为 0，方向不可控，参数不可拆解。
为什么 shadow-* 内置类不适用于 UI 规范
UI 规范通常要求明确指定阴影的「方向」「扩散半径」「模糊大小」和「颜色透明度」，比如「向右 4px、模糊 8px、透明度 0.08」。而 shadow-sm、shadow-md、shadow-lg 是硬编码值，例如 0 4px 6px -1px rgba(0,0,0,0.1)，x 始终为 0，y 始终为正，无法表达左/上/斜向等设计语言。
常见错误现象：
- 给卡片加
shadow-md后想让它「向右浮起」，结果阴影始终向下，毫无反应 - 设计师标注「右偏 6px + 模糊 12px」，你翻遍文档也找不到对应类名
- 深色模式下阴影发灰看不见，但
shadow-md不支持按模式切换 rgba 值
用 shadow-[] 直接映射设计稿参数
Tailwind 3.0+ 的 shadow-[] 语法允许你把 box-shadow 四个参数（x y blur spread）原样写进类名，本质就是 CSS box-shadow 值的字符串化封装。
实操建议：
- 设计稿写「向右 8px，模糊 12px，无扩散，黑 8%」→ 直接套
shadow-[8px_0_12px_0_rgba(0,0,0,0.08)] - 要「向上且略左」：x 负、y 负 →
shadow-[-4px_-6px_8px_0_rgba(0,0,0,0.06)] - 深色模式需同步调整：用
dark:shadow-[8px_0_12px_0_rgba(255,255,255,0.1)]，别漏掉 alpha 值重调 - 避免在列表项里高频使用不同
shadow-[...]——滚动时可能触发重绘卡顿
要不要 extend theme 写进 tailwind.config.js？
不推荐为每个方向/尺寸组合提前注册一堆 shadow-left-sm、shadow-right-lg 进配置。原因很实际：
- 每种偏移 + 每种模糊 + 每种透明度都要单独定义，维护成本远高于直接写
shadow-[...] - 响应式场景如
md:shadow-[12px_0_...]仍需在配置中穷举所有断点变体 - 绝大多数项目里，定制阴影是局部需求（比如仅按钮悬停、仅卡片浮起），没必要全局污染 theme
- 真需要复用，用
@layer utilities抽成 class 更轻量：.shadow-right-sm { box-shadow: 8px 0 12px -2px rgba(0,0,0,0.08); }
真正容易被忽略的是：阴影方向控制不是 Tailwind 的“缺失功能”，而是它把 box-shadow 的原始参数显式暴露出来了——你不需要猜、不用绕、更不必魔改配置，只要按设计稿数值填进 shadow-[x_y_blur_spread_rgba(...)] 就行。唯一要注意的，是别把括号里写成 shadow: ...，Tailwind 只认方括号语法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
