Tailwind CSS 构建时无法读取 :root 变量，因其在 Node.js 环境运行，不解析浏览器运行时 CSS 逻辑；颜色系统需静态 RGB 值生成变体，而 var(--x) 无法提取分量，易致 color: rgb(NaN); 等非法输出。
Tailwind CSS 在构建时无法读取 :root 中定义的 CSS 变量（比如 --primary-color），根本原因在于它不解析运行时 CSS 逻辑，只处理 tailwind.config.js 中静态的 JS 对象值。
tailwind.config.js 不执行 CSS 变量求值
Tailwind 的颜色系统需要完整 RGB 分量来生成变体（如 hover:bg-blue-600、bg-blue-50、对比度检查等）。而 rgb(var(--primary)) 是一个未计算的字符串，插件无法从中提取 R/G/B 数值。即使你写成：
primary: 'rgb(var(--primary))'
构建后生成的 CSS 里会出现类似 color: rgb(NaN); 的非法值——因为变量在 JS 配置阶段根本没被浏览器解析。
- 配置文件是 Node.js 环境下运行的，
:root不存在于该环境 -
var(--x)只在浏览器渲染时才被替换，Tailwind 构建流程完全跳过这步 - 拼错变量名（如
--primray）也不会报错，只会静默产出无效样式
为什么 bg-[--primary] 能用但不能配透明度
任意值语法 bg-[--primary] 是 Tailwind JIT 允许的“原样透传”，它不经过颜色插件，直接编译为 background-color: var(--primary);。但它有硬限制：
立即学习“前端免费学习笔记（深入）”；
- 不支持
/50透明度后缀（bg-[--primary]/50无效） - 无法生成
hover:bg-[--primary]等变体（JIT 不扫描带括号的任意值做变体推导） - 必须确保
:root或对应作用域内已声明该变量，否则回退到初始值（通常是inherit）
所以它适合简单覆盖，不适合主题系统级复用。
如何让 CSS 变量和 Tailwind 真正协同工作
核心是分清职责：CSS 变量负责运行时切换，Tailwind 负责类名组织与工具链集成。推荐两种落地方式：
- 固定色板 → 直接写死 HEX/RGB 到
theme.extend.colors，例如brand: '#3b82f6'，然后用bg-brand-500 - 动态主题 → 放弃在 config 里引用变量，改用
data-theme="dark"+@layer utilities手动绑定：@layer utilities { .bg-primary { background-color: var(--primary); } .text-primary { color: var(--primary); } }再配合data-theme="light"切换根变量值 - 若坚持用
rgb(var(--x))，务必在 HTML 中提前定义：<html style="--primary: 59, 130, 246">，并在 config 中写primary: 'rgb(var(--primary))'——但注意：任何缺失或类型错误都会导致构建无提示失败
最容易被忽略的一点：Tailwind 的颜色工具类（bg-blue-500）和 CSS 变量（var(--blue)）本质是两套系统，强行桥接只会增加调试成本。真正稳定的方案，是用 class 名作为契约，让 JS 控制 data- 属性或 :root 变量，让 CSS 负责响应，而不是让 Tailwind 去“猜”变量值。
