首页 / Tailwind CSS 入门教程 / 自定义颜色与字体

← 上一篇 下一篇 →
Tailwind CSS 入门教程

自定义颜色与字体

本教程共 50 篇 · 第 40 篇 · 更新于 2026-07-29 · 约 7 分钟阅读

Tailwind CSSTailwind CSS 入门教程自定义颜色自定义字体colorfonttheme

40. 自定义颜色与字体

本节目标：掌握在 Tailwind CSS 中自定义颜色和字体的方法，学会通过 @theme 指令扩展项目的色彩系统和字体体系。

颜色和字体是品牌识别的核心。Tailwind 默认给了一套通用的，但实际项目里几乎都得改——毕竟谁也不想自己的网站长得跟模板一样。

自定义颜色

添加新颜色

在 @theme 中使用 --color-* 命名空间定义新颜色：

@import "tailwindcss";

@theme {
  /* 单色定义 */
  --color-brand: oklch(0.72 0.11 178);
  
  /* 色阶定义（推荐） */
  --color-brand-50: oklch(0.97 0.01 178);
  --color-brand-100: oklch(0.92 0.04 178);
  --color-brand-200: oklch(0.85 0.08 178);
  --color-brand-300: oklch(0.78 0.12 178);
  --color-brand-400: oklch(0.72 0.16 178);
  --color-brand-500: oklch(0.65 0.18 178);
  --color-brand-600: oklch(0.55 0.20 178);
  --color-brand-700: oklch(0.45 0.18 178);
  --color-brand-800: oklch(0.35 0.14 178);
  --color-brand-900: oklch(0.25 0.10 178);
  --color-brand-950: oklch(0.15 0.06 178);
}

定义后可以使用：

<!-- 背景色 -->
<div class="bg-brand-500">品牌色背景</div>

<!-- 文字颜色 -->
<p class="text-brand-700">品牌色文字</p>

<!-- 边框颜色 -->
<input class="border-brand-300 focus:border-brand-500">

<!-- SVG 填充色 -->
<svg class="fill-brand-500"><!-- ... --></svg>

<!-- 渐变 -->
<div class="bg-gradient-to-r from-brand-500 to-brand-700">
  渐变背景
</div>

颜色格式

Tailwind v4 推荐使用 oklch() 格式，因为它有更均匀的感知亮度和更广的色域。但你也可以使用其他格式：

@theme {
  /* oklch（推荐） */
  --color-primary: oklch(0.65 0.18 178);
  
  /* hex */
  --color-secondary: #3b82f6;
  
  /* rgb/rgba */
  --color-accent: rgb(59 130 246);
  
  /* hsl */
  --color-neutral: hsl(220 10% 50%);
  
  /* CSS 变量引用 */
  --color-dynamic: var(--my-color-variable);
}

覆盖默认颜色

重新定义已有的颜色变量会替换默认值：

@theme {
  /* 覆盖默认的蓝色 */
  --color-blue-500: oklch(0.6 0.2 250);
  
  /* 覆盖默认的灰色 */
  --color-gray-200: oklch(0.9 0.005 250);
}

完全替换色板

如果想从零开始定义颜色系统：

@theme {
  --color-*: initial;
  
  --color-white: #ffffff;
  --color-black: #000000;
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
}
Warning

--color-*: initial 会移除所有默认颜色工具类（如 bg-red-500、text-blue-300）。确保这是你想要的。

自定义字体

字体族

@theme {
  /* 添加新字体 */
  --font-display: "Satoshi", sans-serif;
  --font-script: "Great Vibes", cursive;
  
  /* 覆盖默认字体 */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: "Merriweather", Georgia, serif;
  --font-mono: "Fira Code", Consolas, monospace;
}
<h1 class="font-display">展示字体标题</h1>
<p class="font-sans">正文使用无衬线字体</p>
<code class="font-mono">代码使用等宽字体</code>

字体大小

字体大小变量会自动生成行高：

@theme {
  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  /* ... 更多尺寸 */
}

定义 --text-{name} 后会自动生成 text-{name} 工具类。--line-height 部分是可选的，用于设置该字号的默认行高。

<p class="text-xs">超小文字</p>
<p class="text-base">基础文字</p>
<p class="text-xl">大文字</p>

字重

@theme {
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
}
<p class="font-light">细体</p>
<p class="font-normal">正常</p>
<p class="font-bold">粗体</p>

字间距和行高

@theme {
  /* 字间距 */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  
  /* 行高 */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
}
<p class="tracking-wide">宽松字间距</p>
<p class="leading-relaxed">宽松行高，适合长文阅读</p>

完整主题示例

一个完整的品牌主题定义：

@import "tailwindcss";

@theme {
  /* === 颜色系统 === */
  --color-brand-50: oklch(0.97 0.02 250);
  --color-brand-100: oklch(0.92 0.05 250);
  --color-brand-200: oklch(0.85 0.10 250);
  --color-brand-300: oklch(0.78 0.15 250);
  --color-brand-400: oklch(0.70 0.18 250);
  --color-brand-500: oklch(0.62 0.21 250);
  --color-brand-600: oklch(0.54 0.23 250);
  --color-brand-700: oklch(0.46 0.20 250);
  --color-brand-800: oklch(0.38 0.16 250);
  --color-brand-900: oklch(0.30 0.12 250);
  --color-brand-950: oklch(0.20 0.08 250);
  
  /* === 字体系统 === */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Satoshi", "Inter", sans-serif;
  --font-mono: "Fira Code", Consolas, monospace;
  
  /* === 字号系统 === */
  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  
  /* === 圆角系统 === */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  
  /* === 断点系统 === */
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;
  --breakpoint-3xl: 120rem;
}

在 JavaScript 中使用主题

定义好的主题变量可以在 JS 中通过 CSS 变量访问：

// 直接使用 CSS 变量
<motion.div animate={{ backgroundColor: "var(--color-brand-500)" }} />

// 获取计算后的值
const styles = getComputedStyle(document.documentElement);
const brandColor = styles.getPropertyValue("--color-brand-500");
Tip

v4 不再需要 resolveConfig 函数。所有主题值都作为 CSS 变量存在，可以直接在 JS 中使用。

自定义颜色和字体是品牌化的第一步。前期多花半小时定义好设计令牌，后面能省好几小时的重复劳动。

上一篇
@theme指令与设计令牌
下一篇
@custom-variant：自定义变体