Tailwind 无法运行时换主题色，必须用 CSS 变量 + 任意值语法 + data-theme 控制；text-[var(--color-primary)] 不生效主因是变量未定义或被覆盖；需在 :root 或 [data-theme] 下声明变量，并通过 safelist 放行 var() 类，同时确保变量作用域与初始化时机正确。
不能靠修改 tailwind.config.js 实时换主题色，因为 Tailwind 是构建时工具，所有 class 都在打包阶段静态生成。真正能运行时切换的，只有 CSS 变量 + 任意值语法 + 主题类控制这一条路。
为什么 text-[var(--color-primary)] 不生效？
常见原因不是写法错，而是变量没定义或优先级被覆盖：
-
--color-primary必须在:root或[data-theme="xxx"]下显式声明，否则var()回退为inherit - 混用
text-blue-500和text-[var(--color-primary)]时，前者会覆盖后者（它同时设了color和font-weight） - VS Code 插件标红不等于编译失败——只要
tailwind.config.js的safelist包含该字符串，就能生成对应规则
如何让 bg-[var(--color-bg)] 安全通过构建？
Tailwind 默认忽略无法静态分析的 var() 值，必须显式放行：
- 推荐配置
safelist: [/^bg-\[.*\]$/, /^text-\[.*\]$/]，允许所有带方括号的 bg/text 类 - 更精确的做法是列出具体变量名：
safelist: ['bg-[var(--color-bg)]', 'text-[var(--color-text)]'] - 注意：括号必须是英文半角，
var(--color-bg)中不能有空格，否则构建报错
怎么用 data-theme 切换整套主题？
把主题变量定义在 [data-theme="dark"] 这类选择器下，JS 只需改 html 标签的属性：
- 变量必须定义在
@layer base中，否则会被 Tailwind 默认样式覆盖 -
data-theme要设在上，确保所有子元素继承 - 不要混用
dark:和data-theme，dark:只响应prefers-color-scheme或class="dark"，跟自定义主题无关 - 切换时加个
transition: background-color 200ms在:root，能缓解闪动
最易被忽略的是变量作用域和初始化时机：JS 设置 document.documentElement.setAttribute('data-theme', 'blue') 后，如果 CSS 文件还没加载完，浏览器会先按旧变量渲染一帧。建议在 内内联一组默认变量，或用 document.documentElement.style.setProperty() 批量设置初始值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
