自定义阴影不生效主因是未用theme.extend.boxShadow而直接覆盖theme.boxShadow，导致内置类全失效；值须为无引号、无变量、纯px单位的合法box-shadow字符串，且content必须扫描到对应类名或加入safelist。
自定义阴影不生效，大概率不是代码写错了，而是 tailwind.config.js 里没让 Tailwind “看见”它——它压根没生成对应 CSS 规则。
shadow 自定义写在 theme.boxShadow 而不是 theme.extend.boxShadow
直接覆盖 theme.boxShadow 会清空所有内置阴影类（shadow-sm 到 shadow-2xl），Tailwind 构建时只认你写的那几条，其余全丢。更糟的是，如果你没手动补全全部默认值，shadow-md 这类基础类就直接失效了。
- ❌ 错误写法：
boxShadow: { 'card': '0 4px 12px rgba(0,0,0,0.15)' } - ✅ 正确写法：必须用
extend，保留原始映射：extend: { boxShadow: { 'card': '0 4px 12px rgba(0,0,0,0.15)' } } - 生成的类名是
shadow-card，不是card或shadow-card-lg
自定义值里用了引号、rem、变量或 CSS 函数
Tailwind 的 JIT 引擎只接受纯字符串字面量，且单位严格限定为 px，颜色必须是十六进制、rgb(a) 或标准命名色。
- ❌
'0 0.25rem 0.5rem rgba(0,0,0,0.1)'（含rem） - ❌
"0 4px 8px rgba(0,0,0,0.1)"（外层双引号） - ❌
`0 ${offset}px ${blur}px rgba(0,0,0,0.1)`（模板字符串） - ✅ 正确：
0 4px 8px rgba(0,0,0,0.1)（无引号、无变量、纯 px）
HTML 中用了 shadow-card，但 content 没扫到这个类名
哪怕配置完全正确，Tailwind 也不会凭空生成 CSS —— 它只扫描 content 字段指定路径下的源码中“真实出现”的类名。如果 shadow-card 只出现在 JS 变量拼接或动态字符串里（比如 className={`shadow-${type}`}），它就不会被收录。
立即学习“前端免费学习笔记（深入）”；
- 确保
shadow-card字面量出现在 HTML/JSX 文件里，例如：<div class="shadow-card"> - 若必须动态使用，得加到
safelist：safelist: ['shadow-card'] - 检查
content是否漏掉文件类型，比如 React 项目没包含.tsx：./src/**/*.{js,jsx,ts,tsx}
用了 shadow-[...] 任意值语法，但 Safari 渲染失败
任意值阴影在 Safari（尤其 iOS）上极易出问题：省略 spread-radius、多层逗号分隔、负 spread + 大 blur 组合，都会导致整条声明被忽略或渲染异常。
- ❌
shadow-[0_4px_8px_rgba(0,0,0,0.1)]（缺 spread-radius） - ❌
shadow-[inset_0_2px_4px_rgba(0,0,0,0.1),_0_2px_4px_rgba(0,0,0,0.05)]（多层，Safari 15.4 以下失效） - ✅ 安全写法：
shadow-[0_2px_4px_0_rgba(0,0,0,0.08)]（显式0作 spread-radius） - 移动端尤其注意：iOS Safari 对 >4px 的
blur-radius渲染极差，别硬套shadow-xl
最隐蔽的坑是：你在 DevTools 里能看到 box-shadow 声明，但它就是不显示——十有八九是父容器 overflow: hidden 或缺失背景色，Safari 直接裁掉阴影区域，连 computed 样式都骗你。
