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

J
Joy
2026年06月08日 · 1 分钟阅读

调色板、阴影、字体——一张对照表搞定从 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-primaryrounded-cardshadow-card

soft chip 的复刻

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

分享

相关文章