Tailwind CSS 4.0 新特性与迁移指南

# Tailwind CSS 4.0 新特性与迁移指南 ## 重大变更：Oxide 引擎 Tailwind CSS 4.0 使用 Rust 编写的新引擎 Oxide，构建速度提升 10 倍以上。在一个包含 5000 个组件的大型项目中： | 版本 | 首次构建 | 增量构建 | |------|---------|---------| | v3 | 3.2s | 450ms | | v4 | 0.3s | 45ms | ## CSS-first 配置 不再需要 `tailwind.config.js`，直接在 CSS 中配置： ```css /* 之前 (v3): tailwind.config.js */ /* module.exports = { theme: { extend: { colors: { brand: '#3b82f6' } } } } */ /* 现在 (v4): 直接在 CSS 中 */ @import "tailwindcss"; @theme { --color-brand: #3b82f6; --font-display: "Inter", sans-serif; --breakpoint-3xl: 1920px; } ``` ## 新的组合变体 ```html ``` ## 动态工具类 ```html ``` ## 从 v3 迁移步骤 ```bash # 1. 安装 v4 npm install tailwindcss@latest # 2. 运行自动迁移工具 npx @tailwindcss/upgrade # 3. 替换 PostCSS 插件 npm install @tailwindcss/postcss ``` ```javascript // postcss.config.js module.exports = { plugins: { '@tailwindcss/postcss': {}, // 替换旧的 tailwindcss autoprefixer: {}, }, }; ``` ## 需要手动迁移的部分 1. `darkMode: 'class'` 改为 CSS `@custom-variant` 2. 自定义插件 API 有变更 3. `@apply` 在某些场景下行为变化 ```css /* v4 自定义暗色模式触发 */ @custom-variant dark (&:where(.dark, .dark *)); ``` ## 总结 v4 是一个大版本升级，推荐新项目直接使用。老项目可以通过迁移工具平滑过渡。