必须用 theme.extend.colors 扩展自定义色，直接赋值 theme.colors 会清空默认色；色阶需完整定义为字符串键对象才支持 -500 后缀；jit 模式下须在模板中真实使用 class 才生成对应 css；fill/stroke/placeholder 等需手动扩展并推荐用 css 变量；深色模式需手动配置或使用变量。
直接在 tailwind.config.js 里写 --primary-color 不会生效——Tailwind 不解析 CSS 变量名，它只把值编译进生成的工具类。想用 CSS 变量驱动 Tailwind 主题，必须让变量作为「值」出现在合法配置项中，且变量本身得提前在 CSS 中定义好。
tailwind.config.js 中怎么注入 CSS 变量值
Tailwind 的 theme.extend 只接受字符串、数组、对象等静态值，不支持运行时变量求值。所以不能把 --primary-color 当键名写进去，而要把它当字符串值塞进已有属性路径下，比如 colors.primary 或 backgroundColor.primary。
- 正确写法：
primary: 'var(--primary-color)'（注意引号包裹，是字符串字面量） - 错误写法：
'--primary-color': '#3b82f6'或primary: --primary-color（语法错或无效键） - 必须确保该变量已在全局 CSS（如
src/index.css）中通过:root或媒体查询声明，否则运行时取不到值 - 深色模式需额外在
.dark或@media (prefers-color-scheme: dark)中重设变量值，Tailwind 不自动切换
@apply 里能否直接用 var(--x)？
可以，但受限于 CSS 层级和作用域。在 @layer components 或普通 CSS 文件中用 @apply 组合工具类时，如果其中某个类（如 bg-primary）背后是 var(--primary-color)，那它就能生效；但你不能在 @apply 里直接写 background-color: var(--x) ——@apply 只能复用已存在的工具类，不能插入原生 CSS 声明。
- ✅ 允许：
.btn {@apply bg-primary text-white;}（前提是bg-primary已通过配置生成） - ❌ 不允许：
.btn {@apply bg-[var(--primary-color)];}（Tailwind 不解析方括号里的表达式） - ⚠️ 注意：若变量未定义或拼写错误，浏览器计算为
transparent或继承值，控制台无报错，排查困难
为什么需要额外引入 tailwind-css-variables 插件？
原生 Tailwind 不处理 CSS 变量的响应式更新或 fallback 逻辑。tailwind-css-variables 这类插件的作用，是帮你把变量映射成带 fallback 的值（如 var(--color, #3b82f6)），并支持在 theme.extend 中更安全地引用，避免因变量未定义导致样式丢失。
- 基础场景不用装：纯手动管理
:root+var(--x)就够用 - 需要 fallback 或批量注入多个变量时才值得引入插件
- 插件注册后，仍需在
plugins: []中显式调用，否则配置里的var()不会被增强 - 插件不改变变量定义位置——CSS 文件里该写的
:root还得写，它只优化值的使用方式
CSS 变量和 Tailwind 配置的衔接点很窄：变量必须先存在，Tailwind 才能“引用”它；而变量本身的生命周期、作用域、响应式切换，全靠 CSS 自己管。最容易被忽略的是变量定义时机——它得在 Tailwind 生成的 CSS 之前加载，否则即使配置写对了，页面首次渲染也会白屏或错色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
