主题 Token 调校台｜Tailwind CSS v4

01 / 调整主题变量

输入控件会直接改写页面里的 CSS 变量。

颜色 namespace：--color-* 品牌主色 --color-brand-500 #5b5bd6 强调色 --color-highlight #ffb84d

尺度与形状基础间距 --spacing 4px 紧凑 2px舒展 7px 品牌圆角 --radius-brand 16px 利落 2px柔和 28px

点一个 token，看它生成什么

颜色 token 会生成 bg-brand-500、text-brand-500、border-brand-500 等工具类。

预览里的类名保持不动，变化来自 token。

已加载初始主题

设计系统体检

如果卡片、按钮和徽标都从同一个品牌色 token 取值，换品牌不再是“全项目搜十六进制”，而是改一个定义。

type="text/tailwindcss"

@theme {
  --color-brand-500: #5b5bd6;
  --color-highlight: #ffb84d;
  --spacing: 4px;
  --radius-brand: 16px;
}

<article class="
  rounded-brand
  border-brand-500
  p-6 shadow-brand
">
  <button class="
    bg-brand-500
    hover:bg-brand-700
  ">
</article>

p-624px

rounded-brand16px

bg-brand-500#5b5bd6

gap-312px