不能在 tailwind.config.js 中直接写 var(--primary)，必须用 bg-[var(--primary)] 等任意值语法或通过 theme.extend.colors 配置支持透明度，同时确保 CSS 变量已在 :root 初始化且作用域正确。
不能在 tailwind.config.js 里直接写 var(--primary) —— Tailwind 构建时根本读不到运行时才存在的 CSS 变量，会报错或静默忽略。
用 bg-[var(--primary)] 这类任意值语法，但必须确保变量已定义
这是最直接、无需改配置的方案，适合单点动态色（比如一个按钮背景随用户选色实时变）：
-
var(--primary)必须已在:root或当前元素作用域里声明，否则回退为inherit，看起来像“没生效” - 写法必须带方括号：
bg-[var(--primary)]，不能漏掉[]；bg-var(--primary)是无效的 - 如果变量名含空格或特殊字符（如
--my-color-1），需 URL 编码或改用连字符命名，否则构建失败 - 使用前确认
content配置已覆盖该模板文件，否则 Tailwind 扫不到这个字符串，不生成对应 CSS 规则
在 tailwind.config.js 中接入 CSS 变量，支持透明度和色阶
想让 bg-primary/70、text-primary 等整套工具类都响应变量变化，就得走配置扩展路线：
-
theme.extend.colors.primary要写成'rgb(var(--primary) / <strong></strong>)'，注意末尾的/占位符不能删——Tailwind 靠它识别透明度语法 - JS 修改颜色时，必须同时设置
--primary和--primary-alpha（哪怕设为1），否则/70类变体失效 - 只定义
--primary: 239 68 68（空格分隔 RGB）即可，不用写rgb()包裹；Tailwind 会自动拼 - 别忘了在 CSS 入口（如
src/index.css）里用:root { --primary: ... }初始化变量，否则开发时就报错
用 @layer utilities 手动绑定变量到自定义 class
当需要控制更多属性（比如 ring-primary、shadow-primary）或避免污染默认 color palette 时，这条路更可控：
立即学习“前端免费学习笔记（深入）”；
- 在全局 CSS 文件里写：
@layer utilities { .text-primary { @apply text-[var(--color-primary)]; } } -
[var(--color-primary)]是合法任意值，但必须确保--color-primary已声明，且命名符合 CSS 自定义属性规范（只能含字母、数字、连字符） - 混用时小心优先级：如果同时写了
text-blue-500 text-primary，前者会覆盖后者（因text-blue-500设了color和font-weight） - VS Code 插件标红不用怕——只要
safelist里加了text-primary或对应字符串，就能正常构建
最容易被忽略的是变量作用域和初始化时机：JS 在 DOM ready 后才 setProperty，但浏览器可能已按未定义的 var() 渲染了一帧。建议在 <head> 内联一组默认变量，或用 document.documentElement.style.setProperty() 同步初始化所有主题变量。
