tailwind中css变量不能直接用于color配置，必须在@layer base中定义且命名统一；运行时切换主题需用data-theme属性配合@layer utilities手动绑定，而非修改theme.extend.colors。
tailwind.config.js里不能直接用var(--x)当颜色值
直接写primary: 'var(--primary)'会导致bg-primary-500、hover:bg-primary等变体类缺失或报错，因为Tailwind的color插件需要静态RGB值来生成色阶和暗化逻辑。var(--primary)只是字符串，无法被解析出r/g/b分量。典型现象是dev server启动时报Cannot read property 'r' of undefined，或构建后只有bg-primary生效，其余全丢。
全局CSS变量必须定义在@layer base里
Tailwind只在@tailwind base阶段扫描CSS变量，用于支持bg-[var(--color-bg)]这类任意值语法。如果变量写在@layer utilities或普通CSS顶层，PostCSS阶段根本找不到定义，该类会被静默忽略。
- 正确位置：
@layer base { :root { --color-bg: #fff; } } - 多主题时用
[data-theme="dark"]替代@media，且data-theme必须设在上 - 变量名必须以
--开头，bg-[var(color-bg)]会失效
bg-[var(--x)]要生效得同时满足三件事
这个写法不是“写了就有效”，它依赖三个硬性前提同时成立：
-
tailwind.config.js的safelist必须显式包含，例如：safelist: ['bg-[var(--color-bg)]'] - CSS变量已在
:root或对应[data-theme="dark"]中声明，拼写完全一致（--color-bg≠--bg-color） -
data-theme属性必须加在标签上，否则子元素继承不到作用域
运行时切换主题别碰theme.extend.colors
想让用户点按钮换深色模式？放弃在config里映射var(--x)。那套逻辑只适合设计系统色板这种固定值。运行时切换的唯一稳定路径是：
- 用
@layer utilities手动绑定：.bg-theme { @apply bg-[var(--color-bg)]; } - JS里改
document.documentElement.setAttribute('data-theme', 'dark') - 首次加载时用
document.documentElement.style.setProperty('--color-bg', '#111827')同步初始化，避免闪动
最容易被忽略的是变量命名不统一——项目里同时存在--primary、--theme-primary、--color-primary，切换时部分组件用A、部分用B，颜色直接分裂。收口到一套命名，在@layer base里集中管理，比写十个切换函数管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
