颜色与背景

Tailwind 内置了一套精心设计的调色板:每种颜色分 50~950 共 11 个色阶,从浅到深均匀过渡。这套调色板是它"约束系统"的另一个支柱——你不再随手写 #3b82f6 这种十六进制色值,而是从色阶里选,设计天然一致。

1. 内置调色板

Tailwind 提供了 22 种颜色名,每种都有 11 个色阶:

<!-- Tailwind 内置调色板的颜色名(每种分 50~950 共 11 阶):
     slate  gray  zinc  neutral  stone
     red    orange  amber  yellow  lime  green
     emerald  teal  cyan  sky  blue
     indigo  violet  purple  fuchsia  pink  rose

     规律:数字越小越浅、越大越深
     50  几乎白色,适合页面背景
     100 浅色,适合 hover 态
     200 边框 / 分隔线
     500 主色 / 按钮
     700~800 深色文字
     900 几乎黑色,适合深色背景 -->

命名规律:

灰色系(slate/gray/zinc/neutral/stone):5 种不同色温的灰,选一种作为全站基准。
主色(red/orange/yellow/green/blue/...):按色相分,每种 11 阶。
色阶50 几乎是白,900 几乎是黑,500 是该色相的标准色。

2. 色阶规律(必须记)

这套规律是 Tailwind 调色板的灵魂,记住它你就能"盲选"色阶:

50:几乎白色,适合页面整体背景(如 bg-gray-50)。
100:浅色,适合hover 态、卡片背景。
200:浅色,适合边框、分隔线。
500:该色相的标准色,适合按钮、链接、强调。
600/700:稍深,适合 hover 态(深色版)。
700/800:适合深色文字(text-gray-700 是正文默认色)。
900/950:几乎黑色,适合深色背景、标题文字。

3. 背景色:bg-*

<!-- 背景色:bg-<颜色名>-<色阶> -->
<div class="bg-white">白色背景</div>
<div class="bg-black">黑色背景</div>
<div class="bg-blue-500">主蓝色背景</div>
<div class="bg-gray-100">浅灰背景(常用页面底色)</div>
<div class="bg-gray-900">深灰背景(常用于暗色模式)</div>

<!-- 透明度:用 / 加百分比 -->
<div class="bg-black/50">半透明黑色(常做遮罩)</div>
<div class="bg-blue-500/75">75% 透明度的蓝色</div>

透明度后缀是 Tailwind 的高频技巧:/50、/75 表示该颜色的透明度。最常用于"半透明遮罩"(弹窗背景)。

4. 文字颜色:text-*

<!-- 文字颜色:text-<颜色名>-<色阶> -->
<p class="text-black">黑色文字</p>
<p class="text-white">白色文字</p>
<p class="text-gray-700">正文默认色(深灰)</p>
<p class="text-gray-500">次要说明文字</p>
<p class="text-blue-600">链接蓝</p>
<p class="text-red-500">错误提示红</p>

<!-- 文字透明度 -->
<p class="text-black/50">半透明黑色文字</p>

正文建议用 text-gray-700(标准深灰,比纯黑柔和)。次要说明用 text-gray-500。链接用 text-blue-600,错误用 text-red-500——这些是行业默认惯例。

5. 边框颜色:border-*

<!-- 边框颜色:border-<颜色名>-<色阶> -->
<div class="border border-gray-200">浅灰边框</div>
<div class="border-2 border-blue-500">粗蓝边框</div>
<div class="border-l-4 border-red-500">左侧红色粗边(常做提示框)</div>

<!-- 边框要先写 border(开启 border-style),颜色才会生效 -->

注意 边框颜色必须配合 border 类(开启 border-style)才能显示。只写 border-gray-200 不会出现边框——这是一个常见的初学者坑。

6. 渐变背景

Tailwind 提供了简洁的渐变 API:

<!-- 线性渐变:bg-gradient-to-<方向> + from-/via-/to- -->
<div class="bg-gradient-to-r from-blue-500 to-purple-500">
  从左到右,蓝到紫
</div>

<div class="bg-gradient-to-b from-green-400 to-blue-500">
  从上到下,绿到蓝
</div>

<!-- 三色渐变:加 via- -->
<div class="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500">
  彩虹色
</div>

<!-- 渐变方向:
     bg-gradient-to-r  向右
     bg-gradient-to-l  向左
     bg-gradient-to-t  向上
     bg-gradient-to-b  向下
     bg-gradient-to-tr 向右上
     bg-gradient-to-br 向右下 -->

渐变常用于:hero 区背景、按钮的微妙立体感、品牌色装饰条。配合 from-、via-、to- 三个停止点,可以拼出任意复杂的渐变。

7. 暗色模式

颜色类配合 dark: 前缀,可以优雅地支持暗色模式:

<!-- 配合 dark: 前缀,实现暗色模式自动切换(后面专门一篇讲) -->
<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
  这块内容会随暗色模式自动切换。
</div>

<button class="bg-blue-500 hover:bg-blue-600
               dark:bg-blue-600 dark:hover:bg-blue-500">
  按钮
</button>

启用方式:在 tailwind.config.js 设 darkMode: "class",然后用 JS 给 html 元素加/去 .dark 类。具体后面"状态前缀"篇会详讲。

8. 自定义品牌色

项目通常有一套品牌色,可以通过 tailwind.config.js 扩展:

配置完后就能用 bg-brand-500、text-brand-600 等,和默认色一视同仁。具体后面"自定义配置"篇详讲。

9. 常见配色组合

几个经典组合,直接抄就能用:

简洁后台:bg-gray-50 页面 + bg-white 卡片 + border-gray-200 边框 + text-gray-700 正文。
主按钮:bg-blue-500 hover:bg-blue-600 text-white。
危险按钮:bg-red-500 hover:bg-red-600 text-white。
提示框:bg-blue-50 border-l-4 border-blue-500 text-blue-700 p-4。
暗色 hero:bg-gray-900 text-white。

小结

记住色阶规律 + 三大系列:

50/100/200 浅色,500 标准,700+ 深色
bg-* 背景,可加 /50 透明度
text-* 文字,正文用 text-gray-700
border-* 边框,要先写 border 开启
bg-gradient-to-* + from-/to- 渐变

下一篇讲字体与排版,让文字"好看"。

← 上一篇 Flexbox 与 Grid 布局

下一篇字体与排版 →

✈️💬