必须通过theme.extend.boxShadow自定义阴影，直接覆盖theme.boxShadow会清空所有默认shadow类；值须为合法box-shadow字符串，禁换行、注释及多余空格；内阴影需显式写inset；文字阴影应使用text-shadow多层叠加而非drop-shadow。
shadow- 类不是随便改的，直接覆盖 theme.boxShadow 会清空所有默认类（shadow-sm 到 shadow-2xl 全失效），必须走 extend.boxShadow 才安全。
自定义多层阴影必须用 extend.boxShadow，不能写错格式
Tailwind 不接受自由格式字符串，值必须是合法的 CSS box-shadow 值，且不能含换行、注释或多余空格。
- ✅ 正确写法：
'card-lg': '0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)' - ❌ 错误写法：
'card-lg': `0 4px 6px -1px rgba(0,0,0,0.1),\n0 2px 4px -1px rgba(0,0,0,0.06)`（含换行） - ❌ 错误写法：
'card-lg': '0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f'（十六进制带 alpha 不被 JIT 安全解析） - 逗号前后不能有空格，否则编译器会当成两个独立值处理，导致生成无效类
需要内阴影（inset）时，必须显式写 inset 关键字
Tailwind 没有 shadow-inner 这类原生类，inset 必须作为字符串的一部分写进配置或任意值语法里。
- 扩展配置方式：
'inner-sm': 'inset 0 1px 2px rgba(0,0,0,0.05)'→ 使用shadow-inner-sm - 临时写法：
shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)]（注意下划线替代空格） - ⚠️ Safari 15.4 以下对
inset+ 大模糊值（>8px）支持差，边缘可能断裂，上线前务必实机测试 - 父容器若设了
overflow: hidden，inset阴影会被裁剪——这不是 bug，是渲染规则
文字阴影要用 textShadow，drop-shadow 是坑
filter: drop-shadow() 在 Safari 和微信 WebView 中常裁剪失真，且不支持多层跳档模糊。跨浏览器稳定方案只有 text-shadow 多层叠加。
- Tailwind 4.1+ 原生支持
text-shadow工具类；≤3.x 必须手动配theme.extend.textShadow或装@designbycode/tailwindcss-text-shadow - 多层写法示例：
'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)' - 偏移必须是
0 0，否则文字“飘”；颜色禁用命名色（如blue），只用rgba()或hsla() - 模糊半径按 1→2→4→8 跳档递增，线性递增（如 2→4→6）会导致层叠塌陷
悬停/响应式阴影要手动配状态类，不能靠 hover:shadow-xxx 自动推导
Tailwind 不会为自定义 shadow 名称自动补全 hover: 或 md: 变体，必须显式定义并启用对应变体。
立即学习“前端免费学习笔记（深入）”；
- 在
tailwind.config.js的variants中加['responsive', 'hover', 'focus']（旧版需手动开，新版默认含 responsive） - 配置中定义
'card-hover': '0 8px 24px -4px rgba(99,102,241,0.15)'，才能用hover:shadow-card-hover - 如果用了
@layer utilities写自定义类（如.shadow-card），则需额外加hover:shadow-card规则，或直接写.shadow-card:hover { ... } - 性能提示：大模糊值（如
96px）在滚动时易掉帧，Android WebView 渲染极慢，建议模糊半径 ≤40px
inset 但父级 overflow: hidden，阴影就消失；用了 drop-shadow 但只在 Chrome 测，Safari 就失真。动手前先确认环境和目标平台。 
