Tailwind 的 boxShadow 配置只接受对象映射而非数组，因 JIT 引擎仅识别 key-value 结构，每个 value 必须是含逗号分隔的合法 box-shadow 字符串；传入数组会导致静默忽略或构建失败。
直接在 tailwind.config.js 的 theme.extend.boxShadow 里写数组，Tailwind 不识别——它只接受对象映射，每个 key 对应一个字符串形式的 box-shadow 值。
为什么 boxShadow 配置不能用数组
Tailwind 的 boxShadow 主题配置项设计为键值对映射：key 是类名后缀（如 md），value 是最终生成的 CSS 字符串。即使你传入数组，JIT 引擎也不会自动 join 或解析成合法的 box-shadow 值，反而会导致构建失败或静默忽略。
- 错误写法：
md: ['0 2px 4px rgba(0,0,0,0.1)', '0 -2px 4px rgba(255,255,255,0.8)'] - 正确写法必须是单个字符串，多个阴影用逗号分隔：
md: '0 2px 4px rgba(0,0,0,0.1), 0 -2px 4px rgba(255,255,255,0.8)' - 任意值语法（
shadow-[]）底层也是拼成一个字符串，所以配置层逻辑必须一致
如何在配置中安全定义多重阴影
只要 value 是合法的 box-shadow 字符串，含逗号、inset、CSS 变量都完全支持。关键是把多个阴影“手动拼好”，而不是依赖数组结构。
- 保留原生语义的同时新增自定义项，比如加一个
card键：card: '0 4px 12px -2px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1)' - 使用
var(--color)没问题，Tailwind 会原样输出：glow: '0 0 8px var(--primary-500), 0 0 16px var(--primary-300)' - 注意空格和逗号前后不能有多余换行或制表符，否则可能被截断；建议写成单行
配置后怎么用：类名和任意值的边界
配好的 key 会生成对应工具类，比如 boxShadow.card → shadow-card；但复杂动态场景仍得靠 shadow-[]。
立即学习“前端免费学习笔记（深入）”；
- 已配置的
shadow-card类可直接用：<div class="shadow-card"> - 需要根据 props 动态变色？只能用
shadow-[...]，因为 Tailwind 不支持运行时拼接类名 -
shadow-[]中的逗号必须用英文半角，空格要转下划线：shadow-[inset_0_0_0_1px_var(--primary-500),_0_2px_4px_rgba(0,0,0,0.1)] - 别在配置里写
shadow-[]这种语法——它只是类名约定，不是配置格式
真正容易卡住的地方是：以为配置支持数组就放心 push 多个值，结果 build 没报错但样式不生效。Tailwind 的主题配置永远是「字符串到字符串」的映射，没有隐式数组展开逻辑。
