不能在Tailwind配置中直接用var()引用CSS变量，因配置是构建时静态解析，而var()是运行时机制；正确做法是在CSS中用@layer base定义:root变量，并通过@apply text-[color:var(--x)]或纯CSS规则使用。
如何在Tailwind中用var()引用外部CSS变量
不能直接在theme.extend.colors里写var(--my-red)——Tailwind的配置是构建时静态解析的，var()是运行时CSS机制，二者不兼容。你真正能做的，是在已生成的工具类上叠加自定义CSS变量覆盖，或用@layer配合:root注入后通过var()在普通CSS规则中使用。
在tailwind.config.js里引用var()会报错的原因
Tailwind配置对象里的所有值（比如colors.red.500）必须是字符串、数字或函数返回的静态值，而var(--primary)是CSS语法，会被JS引擎当作无效标识符或字符串字面量处理，最终导致构建失败或颜色未生效。
-
module.exports = { theme: { extend: { colors: { primary: 'var(--primary)' } } } }→ 构建后生成.text-primary { color: var(--primary); }，但该类不会响应:root中的变量变更（因为Tailwind不接管运行时计算） - 更糟的是，若该变量未定义，浏览器会回退到
inherit，而非报错，调试困难 - 所有
var()必须出现在CSS文件中，且依赖于级联顺序和作用域
正确做法：在src/styles.css里用@layer base注入变量并配合var()
把变量定义和使用都放在CSS层，Tailwind只负责生成工具类骨架，变量逻辑由原生CSS承担：
Pandas 配置文件报告生成器
下载
使用ydata-profiling（前身为pandas-profiling）生成全面的数据质量报告，包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。
@layer base {
:root {
--primary: #3b82f6;
--error: #ef4444;
}
}
<p>/<em> 现在可以安全使用 </em>/
.text-primary { @apply text-[color:var(--primary)]; }
.bg-error { @apply bg-[color:var(--error)]; }</p><p>/<em> 或直接写 </em>/
.text-dynamic { color: var(--primary); }
-
@apply里用[color:var(--x)]是合法的，Tailwind 3.3+ 支持任意CSS属性值插值 - 避免在
@apply中写text-var(--primary)——这会被当成字面类名，不解析 - 确保
:root定义在@layer base中，保证最低优先级，便于被后续媒体查询或主题切换覆盖
动态主题切换时var()与Tailwind工具类的协作边界
如果你用JavaScript切换document.documentElement.style.setProperty('--primary', '...')，只有纯CSS规则（如.text-dynamic { color: var(--primary); }）会实时响应；而text-primary这种工具类一旦生成就固定了值，除非你重新构建并注入新CSS。
立即学习“前端免费学习笔记（深入）”；
- 需要运行时变色？放弃
text-primary类，改用text-dynamic这类手动写的类 - 想保留工具类语义又支持主题？用
data-theme="dark"+[data-theme="dark"] :root { --primary: #6366f1; }，仍靠var()驱动 - 别试图用
theme.extend读取localStorage或window.matchMedia——配置阶段无法访问DOM
关键在于分清职责：Tailwind管“类怎么生成”，CSS变量管“值怎么变”。混用时最容易卡在构建时静态值和运行时动态值的交界处，盯着控制台里computed color是否真等于var(--x)，而不是看类名有没有加上。
