II.文章正文002 / 008

用 Tailwind CSS v4 构建设计系统.

2026年5月7日阅读 1 分钟tailwind

v4 的变化

Tailwind v4 将配置从 JavaScript 迁移到 CSS。不再需要 tailwind.config.ts —— 所有配置都在样式表中：

@import "tailwindcss";
 
@theme {
  --color-primary: #2563eb;
  --color-background: #ffffff;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

设计令牌

在 @theme 中定义一次，通过 utility class 全局使用：

@theme {
  --radius-card: 0.75rem;
  --shadow-card: 0 1px 3px rgb(0 0 0 / 0.1);
}

然后在组件中：

<div class="bg-background rounded-card shadow-card">
  <!-- 卡片内容 -->
</div>

暗色模式

基于 class 的暗色模式使用 @variant 指令：

@variant dark (&:where(.dark, .dark *));

在 <html> 上切换 .dark 类即可激活所有 dark: 变体。

自定义 Utility

@utility prose {
  max-width: 65ch;
  line-height: 1.75;
  color: var(--color-text);
}

设计令牌留在 CSS 中，utility 在 HTML 中消费。边界清晰，各司其职。