css变量无法驱动tailwind的shadow-类，因其为静态编译；正确方式是定义自定义class（如.dynamic-shadow），在box-shadow中用var()引用--shadow-h、--shadow-v等带单位的变量，并手动处理响应式与状态。
不能直接用 CSS 变量替换 shadow- 类名，但可以用 box-shadow + var() 实现真正的动态阴影强度控制——关键在于绕过预设类，接管整个声明。
为什么 shadow-sm / shadow-lg 无法被 CSS 变量驱动
Tailwind 的 shadow- 类是静态编译的 CSS 规则，比如 shadow-md 对应固定字符串 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)。它不解析 CSS 变量，也不支持运行时插值。写 shadow-[var(--blur)] 会直接报错或静默失效。
正确做法：用自定义 class + CSS 变量控制 box-shadow
把 box-shadow 声明写进自己的 class，再在其中使用 var() 引用变量。这样变量更新时，阴影实时响应。
- 在
tailwind.config.js的theme.extend中添加一个空的boxShadowkey（仅占位，不填值），避免 JIT 编译冲突 - 在全局 CSS 或
@layer utilities中定义 class：.dynamic-shadow { box-shadow: var(--shadow-h, 0) var(--shadow-v, 4px) var(--shadow-blur, 8px) var(--shadow-spread, -2px) var(--shadow-color, rgb(0 0 0 / 0.1)); } - 在 HTML 元素上同时加该 class 和变量定义：
<div class="dynamic-shadow" style="--shadow-blur: 16px; --shadow-color: rgb(0 0 0 / 0.15);"></div>
- JS 动态修改：
el.style.setProperty('--shadow-blur', '24px')
容易踩的坑：单位、顺序和 Safari 兼容性
这些细节一错，变量就失效：
-
--shadow-blur必须带单位（如12px），不能只写12；Safari 会拒绝无单位值 - 所有四个偏移/半径参数（h/v/blur/spread）都得显式声明，哪怕为
0；漏掉--shadow-spread会导致整条box-shadow解析失败 - 颜色推荐用
rgb(r g b / a)格式，比rgba()在旧版 Safari 中更稳定 - 不要在
box-shadow值里嵌套函数，例如hsl(var(--hue), 70%, 50%)—— 大部分浏览器不支持
配合 Tailwind 的响应式与状态类要手动对齐
Tailwind 的 md:、hover: 等前缀不作用于你自定义的 dynamic-shadow class。如果需要响应式阴影强度，得自己写媒体查询或用 JS 监听 matchMedia；如果要悬停变深，得额外加 hover:dynamic-shadow 并在 CSS 中定义其对应的变量值——这一步必须手写，Tailwind 不会自动推导。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
