什么是 Tailwind CSS v4？
Tailwind CSS v4 (代号 "Oxide") 是这款备受欢迎的 CSS 框架的一次革命性更新。它引入了全新的高性能引擎，用 Rust 重写，带来了惊人的速度提升（比 v3 快高达 10 倍）。但 v4 的魅力远不止于速度，它还带来了一系列旨在提升开发体验和设计灵活性的新特性。
v4 核心亮点：
- 极速性能：全新的 Rust 引擎带来了无与伦比的编译速度，告别漫长的等待。
- 更简洁的配置：
tailwind.config.ts变得更加直观和强大。 - 原生 CSS 变量：v4 默认使用 CSS 变量来定义所有颜色和主题相关的样式，让动态主题切换和运行时定制变得前所未有的简单。
@theme指令：一个强大的新指令，允许你在 CSS 中直接引用和扩展你的theme配置。- 组合变体 (Composite Variants)：更优雅地处理复杂的条件样式，告别冗长的
className。
从零开始配置
让我们通过一个实际项目来配置 Tailwind CSS v4。
1. 安装依赖
首先，你需要安装 Tailwind CSS 和它的 PostCSS 插件。
bash
pnpm add -D tailwindcss @tailwindcss/postcss
2. 初始化配置文件
运行以下命令来生成 tailwind.config.ts 文件：
bash
npx tailwindcss init --ts
这会创建一个基础的配置文件，我们接下来将对它进行扩展。
深入解析 tailwind.config.ts
一个典型的 v4 配置文件如下所示：
typescript
import type { Config } from 'tailwindcss'
export default {
content: [
'./src/app/**/*.{js,ts,jsx,tsx}',
'./src/components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
colors: {
primary: 'hsl(var(--primary))',
secondary: 'hsl(var(--secondary))',
},
borderRadius: {
'lg': `var(--radius)`,
'md': `calc(var(--radius) - 2px)`,
},
keyframes: {
'accordion-down': {
from: { height: '0' },
to: { height: 'var(--radix-accordion-content-height)' },
},
'accordion-up': {
from: { height: 'var(--radix-accordion-content-height)' },
to: { height: '0' },
},
},
animation: {
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out',
},
},
},
plugins: [
require('tailwindcss-animate'),
],
} satisfies Config
content
content 数组告诉 Tailwind 需要扫描哪些文件来查找 class 名称。确保这里包含了你所有使用到 Tailwind class 的文件路径。
theme
theme 对象是你进行设计系统定制的核心。你可以在这里定义颜色、字体、间距、边框圆角等一切。
- 使用 CSS 变量：在 v4 中，最佳实践是使用 CSS 变量来定义你的颜色和主题。例如，
primary: 'hsl(var(--primary))'。这样，你就可以在你的全局 CSS 文件中定义这些变量，从而轻松实现暗黑模式等主题切换。
css
/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
/* ... 更多变量 ... */
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--primary: 210 40% 98%;
/* ... 更多暗黑模式变量 ... */
}
}
plugins
plugins 数组允许你引入官方或社区的插件来扩展 Tailwind 的功能。例如 tailwindcss-animate 可以为你提供一组开箱即用的动画效果。
总结
Tailwind CSS v4 不仅仅是一次性能上的飞跃，它通过引入更简洁的配置、原生的 CSS 变量支持和强大的新指令，极大地提升了前端开发的灵活性和乐趣。通过理解并用好 tailwind.config.ts，你可以构建出既美观又高度可维护的设计系统。
现在就开始在你的下一个项目中使用 v4 吧！