Tailwind内置shadow类无法控制阴影方向，因其固定y偏移为正、x偏移为0；需用shadow-[...]自定义box-shadow值，如shadow-[-10px_0_10px_-2px_rgba(0,0,0,0.1)]实现向左投影。
shadow-md 等内置类无法控制阴影方向
Tailwind 的 shadow-sm、shadow-md、shadow-lg 等类只是预设了 box-shadow 的完整值，固定为「下方+轻微扩散」效果。它们不支持 x/y 偏移量的独立调整，本质上是 CSS 的快捷写法，不是可配置的阴影引擎。
常见错误现象：给按钮加 shadow-md 后想让它「向左投阴影」，结果无论怎么换类都没反应——因为所有内置 shadow 类都写死了 0 4px 6px -1px rgb(...) 这种结构，y 偏移始终为正（向下），x 偏移始终为 0。
用自定义 box-shadow 值覆盖默认行为
最直接的方式是跳过 shadow-* 类，手写 box-shadow 值，并用 Tailwind 的 !important 工具类或内联 style 强制生效（推荐前者，更可控）。
- 向左投阴影：用负的 x 偏移，例如
shadow-[--10px_0_10px_-2px_rgba(0,0,0,0.1)] - 向上投阴影：用负的 y 偏移，例如
shadow-[0_-8px_12px_-3px_rgba(0,0,0,0.08)] - 斜向右上：组合正负值，例如
shadow-[6px_-6px_12px_-3px_rgba(0,0,0,0.06)]
注意：这些值必须用 shadow-[...] 形式，不能写成 shadow: ... —— Tailwind 只识别这种方括号语法来启用任意值。
立即学习“前端免费学习笔记（深入）”；
为什么不用 extend theme 写进配置？
虽然可以在 tailwind.config.js 的 theme.extend.boxShadow 里加新 key，比如 shadow-left，但实际意义有限：
- 每个方向+每种模糊度都要单独定义，维护成本高
- 响应式场景下（如
md:shadow-left）仍需提前在配置中穷举，不够灵活 - 多数项目阴影方向是局部需求，不值得全局污染配置
真正需要复用时，建议抽成 @layer utilities 里的自定义 class，而不是塞进 theme。
兼容性和性能影响很小，但别滥用
shadow-[...] 是 Tailwind 3.0+ 支持的任意值功能，现代浏览器全部兼容，无运行时开销。唯一要注意的是：
- 不要在大量列表项上高频使用不同偏移的阴影（比如表格每行都
shadow-[5px_0_...]），这会触发重绘，滚动可能卡顿 - 深色模式下记得同步调整 rgba 的颜色值，否则阴影可能看不见或过重
- 设计稿里标的是「向右 8px 模糊 12px」，直接套进
shadow-[8px_0_12px_0_rgba(...)]就行，别自己换算 offset
方向控制这事，本质就是把 box-shadow 的四个参数（x y blur spread）显式暴露出来——Tailwind 没封死它，只是没预设罢了。
