主题变量

这里介绍一下主题变量，也就是使用@theme命令定义自己的原子化样式。

这玩意儿可以让你魔改自带的样式，或者自己搓一个 tailwind 实用类。

魔改时可以从 主题变量 查找命名空间，然后修改。

主题变量的好处

统一样式，不用到处写魔法数

例如 px-17、text-13px 都不建议写，而使用 theme.spacing, theme.fontSize 统一管理项目视觉规范。

改一处，全局生效（适合大项目）

设计换主色？换字体？你只需要改 tailwind.config.js 一处。

帮助团队语义化 —— 看 class 就能知道用途

text-primary、bg-card 比 text-blue-600 更体现设计系统语义。

和插件、组件库联动方便

所有主题值都能用于 Tailwind 插件和自定义组件，大大增强可扩展性。

自定义主题

默认主题变量

当你在 CSS 文件的顶部导入 tailwindcss 时，你实际上导入的是：

@layer theme, base, components, utilities;
// node_modules/tailwindcss/index.css
@import "./theme.css" layer(theme);
@import "./preflight.css" layer(base);
@import "./utilities.css" layer(utilities);

theme.css 文件包含了默认的调色板、字体大小、阴影、字体等：

这就是为什么像 bg-red-200、font-serif 和 shadow-sm 这样的工具类可以直接使用——它们是由默认主题驱动的，而不是像 flex-col 或 pointer-events-none 那样硬编码在框架中。

要查看所有默认主题变量的列表，请参阅默认主题变量参考 。