[TOC]

主题定制

Tailwind CSS v4 推荐在 CSS 中使用 @theme 定义设计令牌。设计令牌可以生成对应的工具类，例如颜色、字体、断点、动画等。

基础主题配置

@import "tailwindcss";

@theme {
  --color-brand-50: #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-500: #2563eb;
  --color-brand-600: #1d4ed8;
  --color-brand-700: #1e40af;

  --font-display: "Inter", "system-ui", sans-serif;
  --breakpoint-3xl: 120rem;
}

定义后可以使用：

<h1 class="font-display text-brand-600">品牌标题</h1>
<div class="3xl:max-w-screen-2xl">超宽屏布局</div>

品牌色设计

建议至少定义以下色阶：

自定义字体

@theme {
  --font-sans: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;
}

使用：

<body class="font-sans">
  <code class="font-mono">npm run dev</code>
</body>

自定义动画

@theme {
  --animate-fade-in: fade-in 0.25s ease-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

使用：

<div class="animate-fade-in">淡入内容</div>

定制原则

• 把设计系统中高频复用的值写入 @theme。
• 偶发特殊值可以使用任意值，不必全部主题化。
• 色彩、字体、断点、动画应由团队统一维护。
• 新项目避免同时维护大量旧版 tailwind.config.js 配置和 CSS-first 配置。