Tailwind CSS v4 升级指南：新的配置方式和性能提升

Tailwind CSS v4 发布了！这是一个大版本更新，底层引擎完全重写了。如果你的项目还在用 v3，这篇文章帮你快速了解变化和升级步骤。 ## 最大的变化：配置方式 ### v3：JavaScript 配置文件 ```javascript // tailwind.config.js module.exports = { content: ['./src/**/*.{html,js,jsx,tsx}'], theme: { extend: { colors: { primary: '#3b82f6', }, }, }, } ``` ### v4：CSS 配置 ```css /* app.css */ @import "tailwindcss"; @theme { --color-primary: #3b82f6; --font-display: "Inter", sans-serif; } ``` 没错，配置从 JavaScript 搬到了 CSS 里。这样做的好处是： - 不需要额外的配置文件 - CSS 变量天然支持运行时修改（换肤更方便） - 工具链更简单，不需要 PostCSS 配置 ## 性能提升 v4 的构建速度提升非常明显： - 全量构建：5x 更快 - 增量构建：100x+ 更快（毫秒级） 这得益于新的 Rust 引擎（oxide）。以前保存文件后要等 1-2 秒才能看到变化，现在基本上是即时的。 ## 新增实用类 ### 容器查询 ```html ``` ### 子元素选择器 ```html 自动获得圆角、边框和内边距 不需要每个 li 单独写 ``` ## 升级步骤 1. 更新依赖：`npm install tailwindcss@latest` 2. 运行迁移工具：`npx @tailwindcss/upgrade` 3. 把 `tailwind.config.js` 的自定义配置迁移到 CSS 的 `@theme` 块 4. 删除 `tailwind.config.js` 和 PostCSS 配置 5. 测试一遍所有页面 迁移工具能自动处理大部分变化，但自定义插件需要手动迁移。 ## 要不要升 如果是新项目，直接用 v4。如果是老项目，建议等项目闲的时候再升。v3 还会维护一段时间，不急。但 v4 的开发体验确实好了一个档次，特别是那个构建速度。