直接在 tailwind.config.js 的 theme.extend 中配置 boxshadow 和 textshadow 即可落地品牌阴影，需避免格式错误、多层阴影解析异常及 drop-shadow 导致的 safari 失真问题。
直接在 tailwind.config.js 里扩展 boxShadow 和 textShadow 就能落地品牌阴影，但多数人卡在三处：配置写错格式、多层阴影被当单字符串解析、发光效果用 drop-shadow 导致 Safari 失真。
自定义 box-shadow 必须用 extend.boxShadow，不是 theme.boxShadow
Tailwind 不允许直接覆盖 theme.boxShadow，否则会丢掉所有默认类（shadow-sm 等全失效）。必须走 extend 路径：
module.exports = { theme: { extend: { boxShadow: { 'brand-lg': '0 8px 24px -4px rgba(99, 102, 241, 0.15), 0 2px 4px -2px rgba(99, 102, 241, 0.08)' } } } }- 键名（如
brand-lg）就是类名后缀，用时写shadow-brand-lg - 值必须是合法
box-shadow字符串——逗号分隔的多层阴影完全合法，Tailwind JIT 会原样编译 - 别在值里换行或加注释，JIT 编译器遇到就报错退出
多重阴影不能塞进一个配置项，但可以走 shadow-[] 临时写
如果你需要一组高频复用的双层阴影（比如外扩 + 内陷），又不想污染配置，直接用任意值语法更轻量：
shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_1px_2px_rgba(255,255,255,0.8)]- 注意空格全换成下划线
_，逗号前后不能有空格 - 含
inset或多个rgba()的值，在 Safari 15.4 以下会被整条丢弃，上线前得测 - Android WebView 对模糊半径 >40px 渲染极慢，
shadow-[0_32px_96px_-24px_rgb(0_0_0_/_0.32)]可能导致滚动掉帧
文字发光必须用 text-shadow 多层，drop-shadow 是坑
filter: drop-shadow() 在 Safari 和微信里常裁剪失真，且不支持跳档模糊。真正跨浏览器稳定的方案只有 text-shadow 多层叠加：
- 每层必须写全四个值：
offset-x offset-y blur-radius color，顺序不能错 - 偏移必须为
0 0，否则文字“飘”；颜色必须用hsla()或rgba()，禁用blue这类命名色 - 模糊半径按跳档写：
1px→2px→4px→8px，线性递增（如2px→4px→6px）会塌层 - 示例：
text-[0_0_1px_hsla(240,100%,70%,0.6),_0_0_2px_hsla(180,100%,65%,0.5),_0_0_4px_hsla(270,90%,60%,0.4)]
text-shadow 类默认不存在，要手动启用
Tailwind 默认不生成任何 text-shadow- 工具类，不是你漏装插件——这是设计选择。想用 text-shadow-sm 这类类名，必须自己配：
- 在
tailwind.config.js的theme.extend下加textShadow对象，别写成textShadows或textshadow - 推荐写法：
textShadow: { sm: '0 1px 2px rgba(0,0,0,0.1)', none: 'none' } - 别用社区已归档的
@tailwindcss/text-shadow插件，它和 Tailwind v3.3+ 冲突，装了构建直接失败 - 深色背景下发光失效？不是阴影没渲染，而是
rgba(0,0,0,0.2)在黑底上根本看不见，换rgba(255,255,255,0.2)或调hsla()明度
最易忽略的点：阴影效果从来不是孤立存在的。圆角太小却套 shadow-lg，边缘会糊；背景是浅灰却用黑灰阴影，层次感直接崩；没加 transition-shadow 就写 hover:shadow-lg，悬停时跳变明显。这些细节比配置本身更影响最终观感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
