TailwindCSS v4 全面拥抱了 oklch 色彩空间——一个感知均匀的色彩模型。这意味着相同亮度值的颜色在人眼看来确实同样明亮，色阶过渡更加自然和谐。配合 CSS 变量的深度集成，v4 让主题定制和暗色模式变得前所未有的简单。
oklch 色彩空间
什么是 oklch
oklch 是一种感知均匀的色彩模型，由三个参数定义：
oklch(亮度 色度 色相)oklch(L C H)- L (Lightness): 亮度，0-1 范围，0 是黑色，1 是白色
- C (Chroma): 色度/饱和度，0 是灰色，值越大颜色越鲜艳
- H (Hue): 色相，0-360 度的色轮角度
与传统的 hex、rgb、hsl 相比，oklch 的优势：
/* 传统 hsl: 相同饱和度和亮度，但视觉亮度不一致 */.blue { background: hsl(240, 100%, 50%);} /* 看起来很暗 */.yellow { background: hsl(60, 100%, 50%);} /* 看起来很亮 */
/* oklch: 相同亮度值，视觉亮度一致 */.blue { background: oklch(0.6 0.2 240);}.yellow { background: oklch(0.6 0.2 90);}v4 的默认颜色
v4 所有颜色都以 oklch 格式定义，并存储为 CSS 变量：
/* Tailwind v4 编译后 */:root { --color-blue-500: oklch(0.623 0.214 259); --color-red-500: oklch(0.637 0.237 25); --color-green-500: oklch(0.723 0.191 142);}这使得颜色可以在运行时动态修改。
默认调色板
Tailwind v4 提供了 22 种颜色，每种包含 11 个色阶（50-950）：
灰色系列
| 颜色 | 特点 | 适用场景 |
|---|---|---|
slate | 蓝灰色 | 现代科技感界面 |
gray | 纯灰色 | 通用中性色 |
zinc | 暖灰色 | 高端质感 |
neutral | 最纯灰色 | 不带任何色调 |
stone | 米灰色 | 温暖自然 |
<div class="bg-slate-100 text-slate-900">蓝灰调</div><div class="bg-zinc-100 text-zinc-900">锌灰调</div><div class="bg-stone-100 text-stone-900">暖灰调</div>彩色系列
<!-- 红色系 --><div class="bg-red-500">红色</div>
<!-- 橙色系 --><div class="bg-orange-500">橙色</div>
<!-- 琥珀色系 --><div class="bg-amber-500">琥珀色</div>
<!-- 黄色系 --><div class="bg-yellow-500">黄色</div>
<!-- 青柠色系 --><div class="bg-lime-500">青柠色</div>
<!-- 绿色系 --><div class="bg-green-500">绿色</div>
<!-- 翡翠色系 --><div class="bg-emerald-500">翡翠色</div>
<!-- 青绿色系 --><div class="bg-teal-500">青绿色</div>
<!-- 青色系 --><div class="bg-cyan-500">青色</div>
<!-- 天蓝色系 --><div class="bg-sky-500">天蓝色</div>
<!-- 蓝色系 --><div class="bg-blue-500">蓝色</div>
<!-- 靛青色系 --><div class="bg-indigo-500">靛青色</div>
<!-- 紫罗兰色系 --><div class="bg-violet-500">紫罗兰</div>
<!-- 紫色系 --><div class="bg-purple-500">紫色</div>
<!-- 紫红色系 --><div class="bg-fuchsia-500">紫红色</div>
<!-- 粉色系 --><div class="bg-pink-500">粉色</div>
<!-- 玫瑰色系 --><div class="bg-rose-500">玫瑰色</div>色阶对照
每种颜色包含 11 个色阶，从浅到深：
<!-- 蓝色完整色阶 --><div class="bg-blue-50">50 - 最浅</div><div class="bg-blue-100">100</div><div class="bg-blue-200">200</div><div class="bg-blue-300">300</div><div class="bg-blue-400">400</div><div class="bg-blue-500">500 - 基准</div><div class="bg-blue-600">600</div><div class="bg-blue-700">700</div><div class="bg-blue-800">800</div><div class="bg-blue-900">900</div><div class="bg-blue-950">950 - 最深</div>设计建议：
- 50-100: 背景色、hover 状态
- 200-300: 边框、分割线
- 400-500: 图标、次要文字
- 500-600: 主要按钮、链接
- 700-900: 标题、正文
- 950: 极深色背景
颜色工具类
文字颜色
<p class="text-gray-900">主要文字</p><p class="text-gray-600">次要文字</p><p class="text-gray-400">辅助文字</p><p class="text-blue-500">链接文字</p><p class="text-red-500">错误提示</p>背景颜色
<div class="bg-white">白色背景</div><div class="bg-gray-50">浅灰背景</div><div class="bg-gray-100">灰色背景</div><div class="bg-blue-500">蓝色背景</div>边框颜色
<div class="border border-gray-200">浅边框</div><div class="border-2 border-blue-500">蓝色边框</div><div class="border-b border-gray-100">底部边框</div>透明度
使用斜杠语法设置透明度：
<!-- 背景透明度 --><div class="bg-black/50">50% 透明度黑色</div><div class="bg-blue-500/75">75% 透明度蓝色</div>
<!-- 文字透明度 --><p class="text-gray-900/80">80% 透明度文字</p>
<!-- 边框透明度 --><div class="border border-black/10">10% 透明度边框</div>任意透明度值：
<div class="bg-blue-500/[0.35]">35% 透明度</div>渐变
<!-- 线性渐变 --><div class="bg-gradient-to-r from-blue-500 to-purple-500">从左到右渐变</div>
<!-- 指定中间色 --><div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500"> 三色渐变</div>
<!-- 不同方向 --><div class="bg-gradient-to-t">从下到上</div><div class="bg-gradient-to-b">从上到下</div><div class="bg-gradient-to-l">从右到左</div><div class="bg-gradient-to-r">从左到右</div><div class="bg-gradient-to-tl">到左上</div><div class="bg-gradient-to-tr">到右上</div><div class="bg-gradient-to-bl">到左下</div><div class="bg-gradient-to-br">到右下</div>渐变实战：
function GradientButton({ children }: { children: React.ReactNode }) { return ( <button className="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-medium rounded-lg hover:from-blue-600 hover:to-purple-600 transition-all"> {children} </button> )}
function HeroSection() { return ( <section className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center"> <h1 className="text-5xl font-bold text-white">欢迎</h1> </section> )}暗色模式
启用暗色模式
v4 默认使用 prefers-color-scheme 媒体查询检测系统主题：
<!-- 自动适配系统主题 --><div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"> 浅色/深色自适应</div>手动切换模式
使用 class 策略手动控制：
@import 'tailwindcss';
/* 使用 class 策略 */@variant dark (&:where(.dark, .dark *));<!-- 在 html 或根元素添加 dark 类 --><html class="dark"> ...</html>// 主题切换逻辑function ThemeToggle() { const [isDark, setIsDark] = useState(false)
const toggle = () => { setIsDark(!isDark) document.documentElement.classList.toggle('dark') }
return ( <button onClick={toggle} className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800" > {isDark ? '🌙' : '☀️'} </button> )}暗色模式设计模式
function Card({ title, description }: { title: string; description: string }) { return ( <div className=" bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm dark:shadow-gray-900/20 p-6 " > <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2"> {title} </h3> <p className="text-gray-600 dark:text-gray-300">{description}</p> </div> )}颜色映射建议：
| 用途 | 浅色模式 | 暗色模式 |
|---|---|---|
| 页面背景 | bg-white | dark:bg-gray-900 |
| 卡片背景 | bg-gray-50 | dark:bg-gray-800 |
| 主要文字 | text-gray-900 | dark:text-white |
| 次要文字 | text-gray-600 | dark:text-gray-300 |
| 辅助文字 | text-gray-400 | dark:text-gray-500 |
| 边框 | border-gray-200 | dark:border-gray-700 |
| 分割线 | divide-gray-100 | dark:divide-gray-800 |
自定义颜色
@theme 配置
在 CSS 中使用 @theme 添加自定义颜色：
@import 'tailwindcss';
@theme { /* 品牌色 */ --color-brand-50: oklch(0.97 0.01 250); --color-brand-100: oklch(0.93 0.03 250); --color-brand-200: oklch(0.86 0.06 250); --color-brand-300: oklch(0.76 0.1 250); --color-brand-400: oklch(0.66 0.14 250); --color-brand-500: oklch(0.55 0.18 250); --color-brand-600: oklch(0.48 0.16 250); --color-brand-700: oklch(0.4 0.13 250); --color-brand-800: oklch(0.33 0.1 250); --color-brand-900: oklch(0.27 0.07 250); --color-brand-950: oklch(0.2 0.05 250);
/* 功能色 */ --color-success: oklch(0.72 0.19 142); --color-warning: oklch(0.8 0.18 85); --color-error: oklch(0.63 0.24 25); --color-info: oklch(0.7 0.15 230);}使用自定义颜色：
<button class="bg-brand-500 hover:bg-brand-600 text-white">品牌按钮</button>
<div class="text-success">操作成功</div><div class="text-error">操作失败</div>oklch 颜色生成技巧
创建和谐的色阶：保持色相(H)不变，调整亮度(L)和色度(C)
@theme { /* 固定色相 250（蓝紫色），调整亮度和色度 */ --color-primary-50: oklch(0.97 0.01 250); /* 最浅 */ --color-primary-100: oklch(0.93 0.03 250); --color-primary-200: oklch(0.86 0.06 250); --color-primary-300: oklch(0.76 0.1 250); --color-primary-400: oklch(0.66 0.14 250); --color-primary-500: oklch(0.55 0.18 250); /* 基准 */ --color-primary-600: oklch(0.48 0.16 250); --color-primary-700: oklch(0.4 0.13 250); --color-primary-800: oklch(0.33 0.1 250); --color-primary-900: oklch(0.27 0.07 250); --color-primary-950: oklch(0.2 0.05 250); /* 最深 */}规律：
- 亮度(L)：从 0.97 递减到 0.20
- 色度(C)：中间值(500)最高，两端较低
- 色相(H)：保持一致
CSS 变量与运行时主题
v4 的一大优势是所有设计令牌都是 CSS 变量，支持运行时修改：
function ThemeSwitcher() { const themes = { blue: { hue: 250 }, green: { hue: 142 }, purple: { hue: 290 }, orange: { hue: 30 }, }
const setTheme = (theme: keyof typeof themes) => { const { hue } = themes[theme]
// 运行时修改 CSS 变量 document.documentElement.style.setProperty( '--color-brand-500', `oklch(0.55 0.18 ${hue})` ) document.documentElement.style.setProperty( '--color-brand-600', `oklch(0.48 0.16 ${hue})` ) }
return ( <div className="flex gap-2"> {Object.keys(themes).map((theme) => ( <button key={theme} onClick={() => setTheme(theme as keyof typeof themes)} className="px-3 py-1 rounded border" > {theme} </button> ))} </div> )}完整主题配置示例
@import 'tailwindcss';
@theme { /* 语义化颜色变量 */ --color-bg-primary: var(--color-white); --color-bg-secondary: var(--color-gray-50); --color-bg-tertiary: var(--color-gray-100);
--color-text-primary: var(--color-gray-900); --color-text-secondary: var(--color-gray-600); --color-text-tertiary: var(--color-gray-400);
--color-border-primary: var(--color-gray-200); --color-border-secondary: var(--color-gray-100);}
/* 暗色模式覆盖 */.dark { --color-bg-primary: var(--color-gray-900); --color-bg-secondary: var(--color-gray-800); --color-bg-tertiary: var(--color-gray-700);
--color-text-primary: var(--color-white); --color-text-secondary: var(--color-gray-300); --color-text-tertiary: var(--color-gray-500);
--color-border-primary: var(--color-gray-700); --color-border-secondary: var(--color-gray-800);}// 使用语义化颜色function Layout({ children }: { children: React.ReactNode }) { return ( <div className="bg-[var(--color-bg-primary)] text-[var(--color-text-primary)] min-h-screen"> <nav className="border-b border-[var(--color-border-primary)]"> {/* 导航内容 */} </nav> <main className="bg-[var(--color-bg-secondary)]">{children}</main> </div> )}实战：品牌主题配置
结合 CSS 变量和 JavaScript 实现动态主题切换：
const themes = { light: { primary: 'oklch(0.55 0.18 250)', background: 'oklch(1 0 0)', text: 'oklch(0.2 0 0)', }, dark: { primary: 'oklch(0.65 0.18 250)', background: 'oklch(0.15 0 0)', text: 'oklch(0.95 0 0)', },}
function applyTheme(themeName: keyof typeof themes) { const theme = themes[themeName] const root = document.documentElement Object.entries(theme).forEach(([key, value]) => { root.style.setProperty(`--theme-${key}`, value) }) localStorage.setItem('theme', themeName)}/* 使用主题变量 */@theme { --color-primary: var(--theme-primary, oklch(0.55 0.18 250)); --color-background: var(--theme-background, oklch(1 0 0)); --color-text: var(--theme-text, oklch(0.2 0 0));}<div class="bg-background text-text"> <button class="bg-primary">主题按钮</button></div>颜色是界面设计的灵魂，而 Tailwind v4 的 oklch 系统让颜色管理变得科学且灵活。下一篇文章将探讨响应式设计，了解断点系统和移动优先策略的实践方法。