IE11中CSS变量完全失效，因浏览器静默丢弃所有var()声明；必须通过postcss-custom-properties设preserve:false静态替换为纯值，并配合no-cssvars类运行时兜底，且变量须定义在:root、值为静态常量。
Tailwind CSS 本身不解决 CSS 变量在 IE11 或旧版 Safari 中的兼容问题——这些浏览器根本不会解析 var(--x)，整条声明被静默丢弃，不是降级，是失效。必须靠构建时静态替换 + 运行时 class 兜底双保险。
为什么 var(--x, #fff) 在 IE11 里完全没用
IE11 连 var() 函数语法都不认识，遇到 color: var(--primary, #007bff) 直接跳过整条声明，最终取继承值或初始值（比如文字变黑）。后备值只在支持变量的浏览器中生效，对 IE 来说形同虚设。
- 所有含
var()的声明，在 IE11 中等价于被注释掉 -
var(--a, var(--b, #000))这类嵌套写法同样无效，IE 不解析括号内任何内容 - 不能依赖
@supports (--x: red)—— 该语法非法，所有浏览器都会忽略
用 postcss-custom-properties 做构建时静态替换
这是最可靠的方式：把 color: var(--primary) 编译成 color: #007bff，并移除原始 var() 调用，让 IE 看到的是纯静态值。
- 必须设
preserve: false，否则插件只做替换不删除原声明，IE 仍会跳过第二行 - 变量定义必须是静态常量：
--primary: #007bff;✅，--size: calc(1rem + 2px);❌ - 定义位置要明确：推荐统一写在
:root；组件级变量（如.btn { --bg: blue; }）需确保插件能扫描到作用域 - 检查构建产物 CSS 文件，搜索
var(—— 如果还有残留，说明变量未定义、值不可静态求值，或插件未生效
运行时加 no-cssvars class 兜底关键样式
@supports 规则 IE11 也不支持，所以不能单靠它降级。必须用 JS 检测后给 加 class，再写两套样式。
立即学习“前端免费学习笔记（深入）”；
- JS 检测写法：
CSS.supports('color', 'var(--x)')（传完整声明字符串，别传'--x'） - 检测失败时加
no-cssvars到，例如：document.documentElement.classList.add('no-cssvars') - CSS 写法示例：
.btn { background: var(--primary); }<br>.no-cssvars .btn { background: #007bff; } - 对主题色、间距、圆角等关键属性都应覆盖，不能只靠变量降级
Tailwind 自身变量（如 --tw-bg-opacity）不能被 prefix 隔离
你在 tailwind.config.js 里配 prefix: 'tw-'，只影响类名（如 .tw-p-4），不影响所有以 --tw- 开头的内部变量名。它们由 Tailwind 源码硬编码，全局共享。
- 如果你在
:root里手动写了--tw-bg-opacity: 0.3，就会覆盖 Tailwind 默认值，导致bg-black/50渲染异常 - 第三方库（如 Naive UI）若也用
--tw-前缀，可能互相干扰 - 解决方案：避免在项目中定义任何
--tw-开头的变量；改用项目专属前缀，如--acme-bg-opacity
真正容易被忽略的点是：变量冲突不报错、不警告，只悄悄改变渲染结果。比如 bg-red-500/30 突然变深或变浅，大概率是某个 --tw-bg-opacity 被意外覆盖了，而不是类名写错了。
