颜色系统

Tailwind CSS 内置了一套专业设计的颜色系统，包含 22 种颜色，每种颜色有 11 个色阶。本章将详细介绍如何使用和自定义颜色。

默认颜色调色板

Tailwind 默认提供以下颜色系列：

彩色系

颜色名	用途
red	红色，用于错误、警告
orange	橙色，用于提示、活力
amber	琥珀色，用于警告
yellow	黄色，用于高亮
lime	青柠色，用于成功
green	绿色，用于成功、确认
emerald	祖母绿，用于成功
teal	青色，用于信息
cyan	蓝绿色，用于信息
sky	天蓝色，用于链接
blue	蓝色，用于主要操作
indigo	靛蓝色，用于强调
violet	紫罗兰色
purple	紫色
fuchsia	紫红色
pink	粉色
rose	玫瑰色

灰色系

颜色名	特点
slate	带蓝色调的灰色
gray	中性灰色
zinc	带冷色调的灰色
neutral	纯灰色
stone	带暖色调的灰色

基础色

颜色名	说明
white	白色
black	黑色
transparent	透明

色阶系统

每种颜色从浅到深有 11 个色阶：50、100、200、300、400、500、600、700、800、900、950。

以蓝色为例：

<div class="flex gap-2">
  <div class="bg-blue-50 w-12 h-12 flex items-center justify-center text-xs">50</div>
  <div class="bg-blue-100 w-12 h-12 flex items-center justify-center text-xs">100</div>
  <div class="bg-blue-200 w-12 h-12 flex items-center justify-center text-xs">200</div>
  <div class="bg-blue-300 w-12 h-12 flex items-center justify-center text-xs">300</div>
  <div class="bg-blue-400 w-12 h-12 flex items-center justify-center text-xs">400</div>
  <div class="bg-blue-500 w-12 h-12 flex items-center justify-center text-xs text-white">500</div>
  <div class="bg-blue-600 w-12 h-12 flex items-center justify-center text-xs text-white">600</div>
  <div class="bg-blue-700 w-12 h-12 flex items-center justify-center text-xs text-white">700</div>
  <div class="bg-blue-800 w-12 h-12 flex items-center justify-center text-xs text-white">800</div>
  <div class="bg-blue-900 w-12 h-12 flex items-center justify-center text-xs text-white">900</div>
  <div class="bg-blue-950 w-12 h-12 flex items-center justify-center text-xs text-white">950</div>
</div>

色阶使用建议

色阶	用途
50-100	背景色、悬停状态
200-300	边框、分割线
400-500	图标、文字
600-700	悬停状态、强调
800-950	深色背景、深色文字

颜色工具类

背景颜色

使用 bg-{color}-{shade} 设置背景色：

<div class="bg-white p-4">白色背景</div>
<div class="bg-gray-100 p-4">浅灰背景</div>
<div class="bg-blue-500 p-4 text-white">蓝色背景</div>
<div class="bg-red-500 p-4 text-white">红色背景</div>

文字颜色

使用 text-{color}-{shade} 设置文字颜色：

<p class="text-black">黑色文字</p>
<p class="text-gray-600">灰色文字</p>
<p class="text-blue-500">蓝色文字</p>
<p class="text-red-500">红色文字</p>

边框颜色

使用 border-{color}-{shade} 设置边框颜色：

<div class="border-2 border-gray-300 p-4">灰色边框</div>
<div class="border-2 border-blue-500 p-4">蓝色边框</div>
<div class="border-2 border-red-500 p-4">红色边框</div>

其他颜色属性

<div class="divide-y divide-gray-200">
  <p>分割线颜色</p>
  <p>分割线颜色</p>
</div>

<button class="ring-2 ring-blue-500">焦点环颜色</button>

<div class="shadow-lg shadow-blue-500/50">阴影颜色</div>

<input class="placeholder-gray-400" placeholder="占位符颜色">

<input class="caret-blue-500">光标颜色

<svg class="fill-blue-500">填充颜色</svg>
<svg class="stroke-blue-500">描边颜色</svg>

颜色透明度

使用斜杠语法设置颜色透明度：

<div class="bg-blue-500/50">50% 透明度背景</div>
<div class="bg-blue-500/75">75% 透明度背景</div>
<div class="bg-blue-500/100">100% 不透明背景</div>

<p class="text-blue-500/50">50% 透明度文字</p>

<div class="border-2 border-blue-500/50">50% 透明度边框</div>

也可以使用任意值：

<div class="bg-blue-500/[0.25]">25% 透明度</div>
<div class="bg-blue-500/[71.37%]">71.37% 透明度</div>

任意颜色值

当需要使用不在调色板中的颜色时，可以使用任意值语法：

<div class="bg-[#1da1f2]">Twitter 蓝</div>
<div class="bg-[rgb(29,161,242)]">RGB 格式</div>
<div class="bg-[hsl(200,89%,53%)]">HSL 格式</div>

<p class="text-[#1da1f2]">自定义文字颜色</p>
<div class="border-[#1da1f2] border-2">自定义边框颜色</div>

自定义颜色

在配置文件中添加

export default {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#64748b',
        brand: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          950: '#082f49',
        },
      },
    },
  },
}

然后在 HTML 中使用：

<button class="bg-primary text-white">主按钮</button>
<button class="bg-secondary text-white">次按钮</button>
<div class="bg-brand-500 text-white">品牌色</div>

使用 CSS 变量

在 CSS 文件中定义变量：

@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #64748b;
}

然后在 HTML 中使用：

<button class="bg-primary text-white">主按钮</button>

覆盖默认颜色

export default {
  theme: {
    extend: {
      colors: {
        gray: {
          50: '#f9fafb',
          100: '#f3f4f6',
          200: '#e5e7eb',
          300: '#d1d5db',
          400: '#9ca3af',
          500: '#6b7280',
          600: '#4b5563',
          700: '#374151',
          800: '#1f2937',
          900: '#111827',
          950: '#030712',
        },
      },
    },
  },
}

禁用默认颜色

export default {
  theme: {
    extend: {
      colors: {
        gray: {
          50: '#f9fafb',
          100: '#f3f4f6',
          200: '#e5e7eb',
          300: '#d1d5db',
          400: '#9ca3af',
          500: '#6b7280',
          600: '#4b5563',
          700: '#374151',
          800: '#1f2937',
          900: '#111827',
          950: '#030712',
        },
      },
    },
  },
}

暗黑模式

Tailwind 内置暗黑模式支持，使用 dark: 前缀：

<div class="bg-white dark:bg-gray-800">
  <p class="text-gray-900 dark:text-white">
    自动适配暗黑模式
  </p>
</div>

启用暗黑模式

在配置文件中设置：

export default {
  darkMode: 'class', // 或 'media'
}

• media：根据系统偏好自动切换
• class：根据 HTML 元素的 dark 类切换

手动切换暗黑模式

<html class="dark">
  <!-- 暗黑模式 -->
</html>

<html>
  <!-- 亮色模式 -->
</html>

使用 JavaScript 切换：

// 切换暗黑模式
document.documentElement.classList.toggle('dark')

实战示例

按钮配色

<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
  主要按钮
</button>

<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded">
  次要按钮
</button>

<button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded">
  危险按钮
</button>

<button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded">
  成功按钮
</button>

状态指示器

<div class="flex items-center gap-2">
  <span class="w-3 h-3 bg-green-500 rounded-full"></span>
  <span class="text-green-700">在线</span>
</div>

<div class="flex items-center gap-2">
  <span class="w-3 h-3 bg-yellow-500 rounded-full"></span>
  <span class="text-yellow-700">忙碌</span>
</div>

<div class="flex items-center gap-2">
  <span class="w-3 h-3 bg-gray-400 rounded-full"></span>
  <span class="text-gray-600">离线</span>
</div>

表单验证

<div>
  <label class="block text-gray-700 mb-2">用户名</label>
  <input class="border-2 border-gray-300 focus:border-blue-500 px-4 py-2 rounded w-full">
  <p class="text-gray-500 text-sm mt-1">请输入用户名</p>
</div>

<div>
  <label class="block text-gray-700 mb-2">邮箱</label>
  <input class="border-2 border-red-500 px-4 py-2 rounded w-full">
  <p class="text-red-500 text-sm mt-1">请输入有效的邮箱地址</p>
</div>

<div>
  <label class="block text-gray-700 mb-2">密码</label>
  <input class="border-2 border-green-500 px-4 py-2 rounded w-full">
  <p class="text-green-500 text-sm mt-1">密码强度良好</p>
</div>

卡片配色

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
  <div class="flex items-center gap-4">
    <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
      <span class="text-blue-500 text-xl">👤</span>
    </div>
    <div>
      <h3 class="text-gray-900 dark:text-white font-semibold">用户名</h3>
      <p class="text-gray-500 dark:text-gray-400 text-sm">用户描述</p>
    </div>
  </div>
</div>

OKLCH 颜色空间

Tailwind CSS v4 默认使用 OKLCH 颜色空间定义颜色，这是 W3C 推荐的现代颜色空间，相比传统的 RGB/HSL 有以下优势：

什么是 OKLCH？

OKLCH 是一种感知均匀的颜色空间，由三个参数组成：

• L（亮度）：0 到 1，表示从黑到白
• C（饱和度）：0 到约 0.4，表示颜色的鲜艳程度
• H（色相）：0 到 360，表示色轮上的角度

OKLCH 的优势

特性	RGB/HSL	OKLCH
感知均匀	不均匀，同亮度颜色实际明暗不一	均匀，同亮度颜色实际明暗一致
色域范围	sRGB 色域	P3 色域，颜色更鲜艳
调整直观	调整饱和度可能影响亮度	独立控制，互不影响
渐变效果	可能出现灰色中间色	过渡自然平滑

使用 OKLCH 定义自定义颜色

在 v4 中推荐使用 OKLCH 定义自定义颜色：

@import "tailwindcss";

@theme {
  /* 珊瑚红：亮度 70%，饱和度 18%，色相 25 度 */
  --color-coral: oklch(0.70 0.18 25);
  
  /* 海洋蓝：亮度 55%，饱和度 15%，色相 240 度 */
  --color-ocean: oklch(0.55 0.15 240);
  
  /* 森林绿：亮度 50%，饱和度 12%，色相 145 度 */
  --color-forest: oklch(0.50 0.12 145);
}

创建颜色系列

使用 OKLCH 创建同色系的调色板非常简单，只需调整亮度值：

@import "tailwindcss";

@theme {
  /* 品牌蓝色系列 */
  --color-brand-50: oklch(0.99 0.01 250);
  --color-brand-100: oklch(0.97 0.02 250);
  --color-brand-200: oklch(0.92 0.05 250);
  --color-brand-300: oklch(0.85 0.08 250);
  --color-brand-400: oklch(0.75 0.12 250);
  --color-brand-500: oklch(0.65 0.18 250);
  --color-brand-600: oklch(0.55 0.18 250);
  --color-brand-700: oklch(0.45 0.15 250);
  --color-brand-800: oklch(0.35 0.12 250);
  --color-brand-900: oklch(0.25 0.08 250);
}

这种方式的优点是：只需保持色相（H）不变，调整亮度（L）就能得到视觉一致的颜色系列，而饱和度（C）可以根据亮度适当调整以保持感知上的协调。

CSS 变量暴露

v4 中所有颜色都会自动暴露为 CSS 变量，可以在任何地方使用：

.custom-element {
  background-color: var(--color-blue-500);
  border-color: var(--color-gray-200);
}

在任意值中使用：

<div class="bg-[var(--color-blue-500)]">使用 CSS 变量</div>

小结

本章介绍了 Tailwind CSS 的颜色系统：

• 默认调色板：22 种颜色，每种 11 个色阶
• 色阶系统：从 50 到 950，覆盖从浅到深
• 颜色工具类：背景、文字、边框等颜色控制
• 透明度：使用斜杠语法设置透明度
• 任意颜色值：使用方括号语法设置自定义颜色
• 自定义颜色：在配置文件中扩展或覆盖默认颜色
• OKLCH 颜色空间：v4 默认使用，颜色更鲜艳、感知更均匀
• 暗黑模式：使用 dark: 前缀适配暗黑模式

下一章，我们将学习 Tailwind CSS 的间距控制。