必须用 @theme 规则而非 theme.extend.colors 中写 var(--primary)，因为 tailwind v4 构建时需解析颜色值生成变体类，而 var(--primary) 是运行时变量，导致 hover:bg-primary 失效、bg-primary-500 缺失、text-primary/70 渲染异常及 dark: 类不响应；@theme 将 css 变量注册进主题系统，支持色阶推导、所有变体和多主题切换。
必须用 @theme 规则，而不是往 tailwind.config.js 的 theme.extend.colors 里塞 var(--primary) —— 后者会导致 hover:bg-primary、bg-primary-500 全部失效，且构建时可能静默丢弃变体。
为什么不能在 tailwind.config.js 里写 primary: 'var(--primary)'
Tailwind v4 构建阶段需要解析颜色值来生成明暗梯度、透明度后缀和状态类（如 hover:、disabled:）。var(--primary) 是运行时才求值的字符串，parseColor() 拿不到 r/g/b 分量，直接报 Cannot read property 'r' of undefined 或跳过整个变体生成。现象是：bg-primary 能显示，但 hover:bg-primary 完全没效果，控制台也无提示。
-
bg-primary-500类根本不会出现在生成的 CSS 中 -
text-primary/70渲染为color: rgb(NaN)或透明 - 深色模式类（如
dark:bg-primary）不响应--primary变更，因为变量本身没切换逻辑
正确做法：用 @theme 在 CSS 中声明变量
@theme 是 Tailwind v4 原生支持的规则，它让 CSS 变量直接成为主题系统的一部分，所有变体（包括 /70、hover:、dark:）都能正常工作。
- 在
input.css（或主 CSS 入口）中写：@theme {--color-primary: #3b82f6;} - 搭配
[data-theme="purple"]实现多主题：[data-theme="purple"] {--color-primary: #8b5cf6;} - HTML 切换只需一行 JS：
document.documentElement.dataset.theme = 'purple' - 所有引用
--color-primary的工具类（text-primary、bg-primary、ring-primary）自动更新，无需重渲染组件
@theme 和 :root 变量声明的区别
@theme 不是简单地定义变量，而是把变量“注册”进 Tailwind 主题系统，使其参与色阶推导和变体生成；而 :root { --color-primary: ... } 只是普通 CSS 变量，Tailwind 构建时完全看不到它。
-
@theme必须写在@import "tailwindcss"之后，且不能嵌套在媒体查询或 class 选择器内 - 变量名必须带
--前缀，且推荐使用语义化命名（如--color-brand），避免和 Flowbite 等库冲突 - 若需 alpha 支持（如
bg-primary/70），@theme会自动基于rgb(var(--color-primary) / <alpha>)</alpha>结构生成，无需额外配置 - Flowbite v4 的五套内置主题（
modern、enterprise等）正是靠@theme+[data-theme]实现的，可直接复用其变量结构
最容易被忽略的是初始化时机：JS 设置 data-theme 前，CSS 文件必须已加载完毕，否则首屏会按默认变量渲染一帧。建议在 内联一组基础 @theme 声明，或用 document.documentElement.style.setProperty('--color-primary', '#3b82f6') 提前兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
