自学教程

Tailwind CSS V4 颜色

Tailwind CSS 教程

颜色工具类是 Tailwind 最常用的功能，用来设置文字、背景、边框、轮廓等元素的色彩。Tailwind CSS V4 内置了一套精心设计的调色板，全部使用 OKLCH 色彩模型，同时支持自定义颜色、任意值颜色、透明度语法。

💡 提示：V4 的内置调色板和 V3 大体上一致，但是底层色彩表示换成 OKLCH，颜色观感更均匀。

一、基础颜色工具类

颜色工具的命名格式：{用途}-{色系}-{色阶}

  • text-*：文字颜色
  • bg-*：背景颜色
  • border-*：边框颜色
  • ring-*：轮廓环颜色
  • outline-*：outline 轮廓颜色
  • shadow-*：阴影颜色

示例：

<p class="text-blue-500">蓝色文字</p>
<div class="bg-emerald-600">绿色背景</div>
<div class="border-amber-400 border-2">琥珀色边框</div>

每个色系包含一组色阶，数字越小颜色越浅，数字越大颜色越深。
色阶包含：50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950。

500 一般作为该色系的基准主色，是日常开发中最常使用的色阶。

二、内置调色板

Tailwind 自带多组色系，分为中性色和彩色。

中性色系（灰度）

中性色主要用于文本、背景、分割线。

  • slate：冷调灰，带一点蓝
  • gray：标准灰色
  • zinc：偏中性的灰，官方文档示例大量使用
  • neutral：中性灰，饱和度极低
  • stone：暖调灰，带一点黄

中性色推荐用来搭建页面基础骨架：页面背景、正文文字、次要文字、边框分割线。正文文字一般用 slate-800 / zinc-800；次要文字用 slate-500；页面背景用 slate-50。

彩色系（功能色、强调色）

  • red：红色，错误、删除、危险提示
  • orange：橙色
  • amber：琥珀色，警告提示
  • yellow：黄色
  • lime：青柠绿
  • green：绿色，成功、完成状态
  • emerald：翡翠绿
  • teal：水鸭青
  • cyan：青蓝色
  • sky：天蓝色
  • blue：蓝色，默认主色、链接
  • indigo：靛蓝
  • violet：紫罗兰
  • purple：紫色
  • fuchsia： fuchsia（玫紫）
  • pink：粉色
  • rose：玫瑰红
<span class="text-red-500">错误</span>
<span class="text-green-500">成功</span>
<span class="text-amber-500">警告</span>
<span class="text-blue-500">信息</span>

特殊关键字颜色

这些颜色没有色阶，直接使用：

  • white 白色
  • black 黑色
  • current：继承当前元素文字颜色（currentColor）
  • transparent：完全透明
  • inherit：继承父元素颜色

current 在图标场景特别好用，SVG 的 fill 可以跟随文字颜色变化：

<svg class="w-5 h-5 text-blue-500 fill-current">
  <!-- svg path -->
</svg>

三、透明度语法

在颜色后面加 /，后跟透明度值。透明度取值范围 0~100，代表不透明度百分比。

语法：{用途}-{色系}-{色阶}/{透明度}

<div class="bg-blue-500/75">75%不透明度蓝色背景</div>
<p class="text-red-600/50">50%不透明度红色文字</p>
<div class="border-green-400/30 border-2">30%不透明度绿色边框</div>

注意：这里的透明度是颜色通道透明度，不是全局 opacity。opacity 会把整个元素连同子元素一起透明；bg-blue-500/50 只让背景颜色透明，文字不受影响。

四、任意值语法（方括号语法）

如果内置调色板没有你需要的颜色，可以直接写任意色值，支持十六进制、rgb、hsl、oklch。

<div class="bg-[#ff00ff]">十六进制颜色</div>
<div class="text-[rgb(120,20,220)]">rgb颜色</div>
<div class="bg-[oklch(0.6,0.15,200)]">oklch颜色</div>

任意值同样支持透明度：

<div class="bg-[#165DFF]/60">自定义十六进制，60%不透明</div>

最佳实践：一次性、局部使用的特殊颜色，用任意值；项目全局反复复用的品牌色，不要写大量硬编码任意值，推荐定义主题颜色。

五、自定义颜色（@theme）

在 V4 中，使用 CSS 的 @theme 指令扩展颜色，不再依赖 JS 配置文件。定义后，就可以像内置颜色一样使用。

定义单色：

@import "tailwindcss";@theme {
  --color-brand: #165DFF;
}

使用：

<button class="bg-brand text-white px-4 py-2 rounded">按钮</button>

定义一套多阶色，和内置色阶风格对齐：

@import "tailwindcss";@theme {
  --color-brand-50: #f0f6ff;
  --color-brand-100: #e6f0ff;
  --color-brand-500: #165DFF;
  --color-brand-600: #0e42d2;
  --color-brand-700: #092fb3;
}
<div class="bg-brand-50">浅底色</div>
<button class="bg-brand-500 hover:bg-brand-600">主按钮</button>

自定义颜色同样支持 / 透明度语法：

<div class="bg-brand-500/50">半透明品牌色</div>

原理：@theme 定义的颜色会注册成 Tailwind 的颜色变量，底层是 CSS 变量。这意味着你可以用 JS 在运行时修改变量，实现动态换肤。

六、暗色模式颜色

暗色模式一般通过给根元素添加 .dark 类来切换。可以直接在 class 上写 dark: 变体。

<div class="bg-white dark:bg-zinc-900 text-zinc-800 dark:text-zinc-100">
  亮色下白底黑字，暗色下深色底浅字
</div>

也可以在 @theme 中，在 .dark 选择器内覆盖主题变量：

@import "tailwindcss";@theme {
  --color-page-bg: #ffffff;
  --color-page-text: #1f2937;
}
.dark {
  @theme {
    --color-page-bg: #121212;
    --color-page-text: #e5e7eb;
  }
}
<div class="bg-page-bg text-page-text">页面容器</div>

七、移除不需要的颜色（精简打包）

注意：这是 NPM 构建模式才生效，CDN 浏览器包不支持 tree-shaking。

Tailwind 默认会把全部调色板引入。如果你的项目不需要某些色系，可以在 @theme 中把颜色设置为 initial，打包时会被移除，减小最终CSS体积。

@theme {
  --color-fuchsia: initial;
  --color-rose: initial;
}

八、完整可运行 CDN Demo

实例

Run this code »
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS V4 Colors Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  <style type="text/tailwindcss">
    @import "tailwindcss";
    @theme {
      --color-brand-500: #165DFF;
      --color-brand-600: #0e42d2;
    }
  </style>
</head>
<body class="p-8 bg-zinc-50">
  <h2 class="text-xl font-bold text-zinc-800 mb-4">内置颜色演示</h2>
  <div class="flex flex-wrap gap-3 mb-8">
    <span class="px-3 py-2 rounded bg-blue-500 text-white">blue-500</span>
    <span class="px-3 py-2 rounded bg-green-500/70 text-white">green-500/70</span>
    <span class="px-3 py-2 rounded bg-red-500 text-white">red-500</span>
    <span class="px-3 py-2 rounded bg-amber-400 text-zinc-900">amber-400</span>
  </div>

  <h2 class="text-xl font-bold text-zinc-800 mb-4">自定义主题色</h2>
  <button class="px-4 py-2 rounded bg-brand-500 hover:bg-brand-600 text-white transition">
    品牌按钮
  </button>

  <h2 class="text-xl font-bold text-zinc-800 mt-8 mb-4">任意值颜色</h2>
  <div class="px-4 py-3 rounded bg-[#722ED1]/80 text-white">
    bg-[#722ED1]/80
  </div>

  <h2 class="text-xl font-bold text-zinc-800 mt-8 mb-4">暗色模式测试（切换html.dark）</h2>
  <div class="p-4 rounded bg-white dark:bg-zinc-800 text-zinc-800 dark:text-zinc-100 border border-zinc-200 dark:border-zinc-700">
    <p>亮色白底，暗色深色背景</p>
  </div>
</body>
</html>

九、常见踩坑

  1. 透明度 /xx 语法，只能跟在颜色后面，不能单独写。bg-blue-500 /50 中间不能加空格。正确写法 bg-blue-500/50。
  2. current 是 currentColor，只能继承元素文字颜色；它不是一个固定色值。
  3. CDN 模式下，无法通过 --color-xxx:initial 移除未使用颜色；tree-shaking 只在NPM构建打包时生效。
  4. 自定义颜色名称，推荐小写字母、横杠命名，不要使用特殊字符。

总结

Tailwind CSS V4 内置一套 OKLCH 调色板，提供 text-*、bg-*、border-* 等颜色工具。

  • 优先用内置色系，快速搭建页面；
  • 局部临时颜色，使用方括号任意值语法；
  • 全局品牌色，用 @theme 定义；
  • 使用 /百分比 设置颜色透明度，区分于全局 opacity；
  • 暗色模式可以用 dark: 变体，或者覆盖 @theme 的CSS变量。

附录：Tailwind CSS V4 颜色速查表

/* 使用格式 */
text-{color}-{shade}
bg-{color}-{shade}
border-{color}-{shade}/* 色阶列表 */
50,100,200,300,400,500,600,700,800,900,950
/* 中性色 */
slate, gray, zinc, neutral, stone
/* 彩色 */
red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
/* 特殊关键字 */
white, black, transparent, current, inherit
/* 透明度 */
bg-blue-500/60
/* 自定义颜色 */
@theme {
  --color-brand-500: #165DFF;
}
/* 任意值 */
bg-[#ff00ff]
bg-[#ff00ff]/50
标签：

0 条笔记