css变量不能替代原子化css类，因其运行时解析破坏静态性、可剔除性与调试确定性；原子类需构建时确定声明，而var()无法被工具静态分析或自动派生变体。
不是最佳搭档——CSS变量本身不能直接支撑原子化CSS，强行混用反而破坏原子类的静态性、可剔除性和调试确定性。
为什么 var(--mt-2) 不能替代 mt-2 类
CSS原子类的核心契约是“一个类名 = 一条确定的声明”，例如 mt-2 必须在构建时就对应 margin-top: 0.5rem。而 var(--mt-2) 是运行时解析的间接引用：
- 构建工具（如 Tailwind、UnoCSS）无法静态分析
var(--mt-2)实际指向哪个值，导致 PurgeCSS 无法安全删除未使用的类 - 开发者在 DevTools 中看到的是
margin-top: var(--mt-2)，而不是具体数值，调试时必须跳转到 :root 查定义，打断工作流 - 压缩后仍保留冗余的
var()调用，无法被 CSS 压缩器进一步优化 - 伪类变体（如
hover:mt-4、dark:bg-blue-600）无法靠 CSS 变量自动派生——var()不参与选择器匹配或媒体查询重计算
:root 变量真正的定位是设计 Token 源头
它不用于直接生成样式，而是作为构建工具的输入配置项。真正起作用的是工具链读取这些变量后，批量生成的**真实原子类**：
-
:root { --spacing-2: 0.5rem; }→ 工具生成mt-2、mb-2、px-2等类，每条都含硬编码值 - 修改
--spacing-2后，重新构建即可全局更新所有依赖它的原子类，无需人工搜索替换 - 变量名必须与原子语义对齐：比如
--spacing-2对应mt-2，而非mt-4；否则工具映射会错位 - 业务级颜色（如
--header-bg）不应放在 :root —— 那属于组件层，不该进入原子系统
dark:、hover: 等变体为何不能靠 CSS 变量动态响应
CSS 变量不会触发选择器重匹配。下面这段代码无效：
:root {
--bg: #fff;
}
@media (prefers-color-scheme: dark) {
:root { --bg: #111; }
}
.card {
background-color: var(--bg); /* ❌ 在暗色模式下不会自动重绘 */
}
真正生效的方式是构建时展开：
- 工具读取
--bg值，同时识别dark:变体，生成独立类dark:bg-gray-900 - 该类在暗色环境下才被应用，且内部是硬编码值
background-color: #111827 - JavaScript 动态切换
document.documentElement.classList.toggle('dark')时，浏览器只需切换已存在的类名，无运行时计算开销
关键点在于：原子化依赖构建期确定性，而 CSS 变量擅长运行时灵活性——两者分工明确，不可越界替代。最容易被忽略的是：把 :root 当作“样式源”去写，却忘了它只是工具链的配置文件，不是样式本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
