29. 颜色系统：调色板与透明度

本节目标：理解 Tailwind 的颜色命名体系和调色板结构，学会用 / 语法控制透明度，能基于 @theme 自定义品牌色。

一套统一的调色板，覆盖几乎所有场景。

内置调色板

Tailwind 内置了 26 种颜色（v4.2 新增了 mauve、olive、mist、taupe 四种中性色）：

色系	用途
`slate`	冷灰，UI 中性色
`gray`	通用灰
`zinc`	暖灰
`neutral`	纯灰
`stone`	大地灰
`red`	错误、危险
`orange`	警告、活力
`amber`	提示、注意
`yellow`	高亮、强调
`lime`	自然、清新
`green`	成功、通过
`emerald`	翠绿、确认
`teal`	青绿、平衡
`cyan`	信息、科技
`sky`	天蓝、轻快
`blue`	主色、链接
`indigo`	靛蓝、深度
`violet`	紫罗兰、创意
`purple`	紫色、高贵
`fuchsia`	品红、活力
`pink`	粉色、柔和
`rose`	玫瑰、温暖

颜色命名规则

每种颜色有从 50 到 950 的色阶（shade），数字越大颜色越深：

{color}-{shade}

例如：
bg-blue-500    → 中等蓝色背景
text-red-600   → 深红色文字
border-gray-200 → 浅灰色边框

色阶分布：

色阶	用途
50-100	极浅，用于浅色背景
200-300	浅色，用于边框、分隔线
400-500	中等，主色调
600-700	深色，用于文字、按钮
800-950	极深，用于深色背景

<!-- 浅蓝色背景 + 深蓝色文字 -->
<div class="bg-blue-50 text-blue-900 p-4 rounded">
  信息提示框
</div>

<!-- 中等蓝色按钮 -->
<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
  确认
</button>

Tip

我的习惯：50-100 做背景，500 做主色按钮/链接，600-700 做文字，900 做深色背景。保持一致的色阶使用规律。

透明度控制

v4 推荐用 / 语法控制颜色透明度：

<!-- 50% 不透明度的蓝色背景 -->
<div class="bg-blue-500/50">半透明蓝色</div>

<!-- 25% 不透明度的红色文字 -->
<p class="text-red-500/25">很淡的红色</p>

<!-- 75% 不透明度的绿色边框 -->
<div class="border-2 border-green-500/75">半透明绿色边框</div>

透明度档位：/5、/10、/20、/25、/30、/40、/50、/60、/70、/75、/80、/90、/95、/100。

Note

v3 中用 bg-opacity-{value}、text-opacity-{value} 控制透明度。v4 推荐直接用 / 语法，更简洁，而且只影响当前属性（opacity 会影响整个元素包括子元素）。

特殊颜色值

类名	效果
`bg-transparent`	透明背景
`bg-current`	继承 color 值
`bg-black`	纯黑
`bg-white`	纯白
`text-inherit`	继承父元素颜色

颜色应用位置

颜色可以用在任何接受 color 值的 CSS 属性上：

前缀	目标属性	示例
`text-`	color	`text-blue-500`
`bg-`	background-color	`bg-red-100`
`border-`	border-color	`border-gray-300`
`ring-`	box-shadow (ring)	`ring-blue-500`
`outline-`	outline-color	`outline-red-500`
`shadow-`	box-shadow color	`shadow-blue-500/50`
`fill-`	SVG fill	`fill-current`
`stroke-`	SVG stroke	`stroke-blue-500`
`accent-`	accent-color	`accent-blue-500`
`caret-`	caret-color	`caret-red-500`
`marker-`	::marker color	`marker:text-blue-500`

自定义颜色：@theme

v4 用 @theme 指令定义自定义颜色：

@import "tailwindcss";

@theme {
  --color-brand-50: #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-200: #bfdbfe;
  --color-brand-300: #93c5fd;
  --color-brand-400: #60a5fa;
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
  --color-brand-700: #1d4ed8;
  --color-brand-800: #1e40af;
  --color-brand-900: #1e3a8a;
  --color-brand-950: #172554;
}

定义后就可以用 bg-brand-500、text-brand-600 等。

也可以定义单个颜色值：

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
}

然后用 bg-primary、text-secondary。

Note

这是 v4 写法。v3 是在 tailwind.config.js 的 theme.extend.colors 里配置。v4 的 @theme 方式更灵活，支持 CSS 变量。

颜色组合技巧

状态色

<!-- 成功 -->
<div class="bg-green-50 text-green-800 border border-green-200 p-4 rounded">
  操作成功
</div>

<!-- 错误 -->
<div class="bg-red-50 text-red-800 border border-red-200 p-4 rounded">
  发生错误
</div>

<!-- 警告 -->
<div class="bg-yellow-50 text-yellow-800 border border-yellow-200 p-4 rounded">
  请注意
</div>

<!-- 信息 -->
<div class="bg-blue-50 text-blue-800 border border-blue-200 p-4 rounded">
  提示信息
</div>

规律：背景用 50-100，文字用 700-800，边框用 200-300。

按钮状态

<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 
               disabled:bg-blue-300 text-white px-4 py-2 rounded">
  按钮
</button>

默认：500
悬停：600（加深）
点击：700（更深）
禁用：300（变浅）

实际应用：品牌色系统

@theme {
  /* 主色 */
  --color-primary-50: #eff6ff;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  
  /* 辅助色 */
  --color-secondary-500: #8b5cf6;
  --color-secondary-600: #7c3aed;
  
  /* 中性色（覆盖默认 gray） */
  --color-surface: #ffffff;
  --color-surface-alt: #f9fafb;
  --color-border: #e5e7eb;
}

<body class="bg-surface text-gray-900">
  <header class="bg-primary-500 text-white">导航栏</header>
  <main class="bg-surface">
    <button class="bg-primary-500 hover:bg-primary-600 text-white">
      主按钮
    </button>
    <button class="bg-secondary-500 hover:bg-secondary-600 text-white">
      辅助按钮
    </button>
  </main>
</body>

本节小结

{color}-{shade} → 颜色命名（50-950）
text- / bg- / border- → 颜色应用位置
{color}/{opacity} → 透明度控制（v4 语法）
@theme → 自定义颜色（v4 CSS-first）
50-100 做背景，500 做主色，600-700 做文字