Tailwind CSS v4 完全指南：新特性与迁移实战

Tailwind CSS v4 来了

2025 年末发布的 Tailwind CSS v4 是框架诞生以来最大的一次重构。它从 PostCSS 插件变成了独立的 CSS 引擎，带来了巨大的性能提升和全新的开发体验。

核心变化

1. 零配置启动

v3 需要 tailwind.config.js、postcss.config.js 一大堆配置，v4 直接引入就好：

/* 一行引入，不需要任何配置 */
@import "tailwindcss";

2. 基于 CSS 的配置

所有配置都写在 CSS 中，告别 JavaScript 配置文件：

@import "tailwindcss";

/* 自定义主题色 */
@theme {
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --font-family-display: "Inter", sans-serif;
  --breakpoint-xs: 375px;
}

3. 性能提升

v4 的按需生成引擎用 Rust 重写，构建速度提升 10-30 倍。大型项目从 3 秒降到 100 毫秒。

4. 新语法

<!-- v3 写法 -->
<div class="flex items-center justify-between p-4 bg-white shadow-lg rounded-xl hover:shadow-xl transition-shadow">

<!-- v4 新增功能 -->
<div class="flex items-center justify-between p-4 bg-white shadow-lg rounded-xl hover:shadow-xl transition-shadow
  /* v4 新特性：容器查询 */
  @max-md:flex-col
  /* 自定义动画 */
  animate-fade-in">

从 v3 迁移

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@next @tailwindcss/vite

迁移清单：

项目	v3	v4
配置文件	tailwind.config.js	CSS @theme
自定义颜色	theme.extend.colors	@theme 变量
插件	require('@tailwindcss/forms')	@import 导入
深色模式	darkMode: 'class'	@variant dark
构建工具	PostCSS 插件	Vite/Rspack 插件

Tailwind v4 是过去几年 CSS 框架领域最重要的更新，值得每个前端开发者上手体验。

naugnaug