Search
·前端开发·约 4 分钟阅读

Tailwind CSS 设计令牌：用 CSS 变量构建可主题化的个人站

分享X微博

硬编码颜色的维护噩梦

<p className="text-zinc-400">...</p>

深色模式时要改成 dark:text-zinc-500，组件一多就 类名爆炸。更好的做法：语义化令牌 + CSS 变量。

全局变量定义

globals.css：

:root {
  --background: #fafafa;
  --foreground: #18181b;
  --muted: #71717a;
  --accent: #0d9488;
  --border: #e4e4e7;
  --card: #ffffff;
}

.dark {
  --background: #09090b;
  --foreground: #fafafa;
  --muted: #a1a1aa;
  --accent: #2dd4bf;
  --border: #27272a;
  --card: #18181b;
}

组件侧统一：

<p className="text-[var(--muted)]">副标题</p>
<div className="border border-[var(--border)] bg-[var(--card)]" />

与 next-themes 配合

<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
  {children}
</ThemeProvider>

attribute="class" 在 <html> 上切换 dark，触发 .dark { ... } 变量覆盖。

surface 工具类

@layer components {
  .surface {
    @apply rounded-xl border border-[var(--border)] bg-[var(--card)];
  }
}

首页卡片、博客列表共用 .surface，改令牌即全站换肤。

color-mix 做 hover

className="hover:border-[color-mix(in_srgb,var(--accent)_35%,var(--border))]"

无需为 hover 再定义第三个变量。

Tailwind v4 @theme（可选）

若升级到 v4，可把变量映射进 @theme：

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}

则可用 bg-background 等语义类，与 ZhuBook 当前 var(--*) 写法二选一，团队统一即可。

小结

个人站 UI 不必上完整 Design System，但 语义色 + CSS 变量 是性价比最高的主题方案；ZhuBook 全站已按此收敛，新增页面请避免再引入 zinc-* 硬编码。

相关阅读

本站评论 (0)

  • 暂无评论，来说第一句吧。