tailwind 默认未定义 shadow-0，故不生效；需用 shadow-none 清空阴影，或在 theme.extend.boxshadow 中显式配置 shadow-0 才能使用。
直接在 tailwind.config.js 的 theme.extend.boxShadow 中添加新键值对，就能用 shadow-* 类名调用——不是插件、不依赖第三方，Tailwind 原生支持。
为什么 shadow-0 不生效？
Tailwind 默认没定义 shadow-0，它既不是 none 也不是 0 0 0 0 transparent。真正清空阴影得用 shadow-none。误写 shadow-0 会静默失败，浏览器里看不到任何报错，但样式也不生效。
-
shadow-none编译为box-shadow: none -
shadow-[0_0_0_0_transparent]是可行的任意值写法，但冗余且难维护 - 若真需要“零值阴影”作为过渡锚点（比如动画起始态），建议自定义一个
shadow-0到配置里，而非硬编码
如何安全扩展 boxShadow 配置
扩展必须放在 theme.extend.boxShadow 下，不能写在 theme.boxShadow 顶层（否则会覆盖默认所有预设）。v3.0+ 支持直接扩展，v2.x 同样可用，但需确认已启用 JIT 模式。
- 基础写法：
module.exports = { theme: { extend: { boxShadow: { 'brutal': '4px 4px 0px 0px rgba(0,0,0,1)', 'glow': '0 0 20px rgba(59, 130, 246, 0.5)', 'inner-strong': 'inset 0 4px 8px -2px rgba(0, 0, 0, 0.2)' } } } } - 键名即类名后缀：定义
'brutal'就能用shadow-brutal - 值必须是完整合法的
box-shadow字符串，支持inset、var(--color)、任意单位（px、rem、%） - 避免在值里写换行或注释——JIT 编译器会直接报错
多重阴影怎么加进配置？
不能把逗号分隔的多层阴影直接塞进单个配置项里（比如 'double': '0 2px 4px #000, 0 -2px 4px #fff'），Tailwind 会把它当做一个整体字符串编译，但浏览器可能因解析歧义而降级或忽略第二层。
- 正确做法：用任意值语法
shadow-[...]直接写，不走配置 - 如果高频复用，可封装成配置项，但必须确保整个字符串被单引号包裹且无空格歧义：
'card-float': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.06)'
- 注意：CSS 变量如
var(--shadow-primary)在配置中要写成字符串形式，Tailwind 不会提前解析 CSS 变量
扩展后要注意的渲染细节
自定义阴影一旦生效，就完全脱离 Tailwind 内置的响应式和 dark mode 自动适配逻辑。比如你写了 shadow-brutal，它不会随 dark:shadow-brutal 自动变色——除非你手动在配置里补全暗色版本。
- 深色模式适配需显式定义：
'brutal': '4px 4px 0px 0px rgba(0,0,0,1)', 'dark:brutal': '4px 4px 0px 0px rgba(255,255,255,1)'
- 移动端慎用高模糊值（如
blur-64）：低端 Android WebView 渲染帧率明显下降，尤其在滚动容器内 - 负扩散值（如
-2px）虽增强“贴边感”，但在低分辨率屏上易出现像素断裂，建议搭配will-change: transform或transform: translateZ(0)强制硬件加速
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
