跳到主要内容

颜色系统

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>

小结​

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

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

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