调色板、阴影、字体——一张对照表搞定从 CSS-in-JS 到原子化 CSS 的迁移。
@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
一行还原,无需额外配置。

