把 MUI 主题转写成 Tailwind v4 的设计 token

Joy — Mon, 08 Jun 2026 00:00:00 +0000

@theme 是关键

Tailwind v4 用 @theme 块声明设计 token，声明即生成工具类。把 Minimal 的 theme-config.ts 里的值原样搬过来：

@theme {
 --color-primary: #00a76f;
 --radius-card: 16px;
 --shadow-card: 0 0 2px 0 rgb(145 158 171 / .2),
 0 12px 24px -4px rgb(145 158 171 / .12);
}

之后就能直接写 bg-primary、rounded-card、shadow-card。

soft chip 的复刻

MUI 的 <Chip variant="soft"> 是 16% 透明度底色 + 主色文字，用 color-mix 一行还原，无需额外配置。

用「设计 token」的思维管理个人站点风格

Joy — Sun, 07 Jun 2026 00:00:00 +0000

token 是单一事实来源

把所有视觉决策（主色、灰阶、圆角、阴影）收敛成命名变量，模板里只引用变量名而非硬编码值。换肤、调性微调都只动一处。

在 Tailwind v4 里落地

@theme 块声明即生成工具类，这让"设计 token = 实现"几乎零距离。