Tailwind CSS v4 vs v3 核心对比
Tailwind CSS v4 是一次底层架构级的重大重构，而非简单的功能迭代，核心目标是提升性能、简化使用、增强灵活性。以下是关键对比：
| 维度 | Tailwind CSS v3 | Tailwind CSS v4 |
|---|---|---|
| 核心架构 | 基于 PostCSS 插件实现，依赖 PostCSS 生态 | 独立的 CLI 工具（底层用 Rust 重写核心），完全脱离 PostCSS |
| 安装配置 | 需要安装 tailwindcss + postcss + autoprefixer，需配置 postcss.config.js + tailwind.config.js | 仅需安装 tailwindcss（内置 autoprefixer），无需 PostCSS 配置，支持零配置启动 |
| 构建性能 | JIT 模式虽快，但仍受 PostCSS 性能限制，大型项目热更新较慢 | Rust 编写的核心使构建速度提升 数倍，热更新延迟大幅降低，内存占用减少约 50% |
| 嵌套语法 | 需依赖 tailwindcss/nesting 插件或第三方嵌套工具 | 原生支持 SCSS 风格的嵌套语法（无需额外插件） |
| 变量/主题系统 | 基于 CSS 自定义属性（--tw-*），自定义主题需在 theme 配置中覆盖 | 新增 @theme 指令，支持类型安全的变量定义，主题定制更灵活、直观 |
| 自定义工具类 | 通过 plugins 配置编写，语法繁琐（需调用 addUtilities 等 API） | 新增 @util 指令，自定义工具类语法更简单，支持直接编写 CSS 逻辑 |
| 条件变体 | 变体（如 hover:/md:）为固定预设，自定义变体需编写插件 | 支持 @when/@else条件语法，自定义变体更灵活，可动态生成变体 |
| 兼容性 | 兼容所有支持 PostCSS 的构建工具（Webpack/Vite/Rollup 等） | 仍兼容主流构建工具，但集成方式改变（不再是 PostCSS 插件，而是 CLI/构建工具专属插件），旧项目需少量适配 |
| 零配置支持 | 需至少配置 content 路径才能使用 | 完全支持零配置启动（自动扫描项目文件），开箱即用 |
v4 新增的核心能力
除了架构重构，v4 还新增了一批实用能力： 1. 原生嵌套语法
无需插件即可直接写嵌套，更符合前端开发者的书写习惯：css /* v4 原生支持（v3 需插件） */ .card { @apply bg-white rounded-lg; &:hover { @apply shadow-lg; } .card-title { @apply text-xl font-bold; } }
- 更灵活的
@theme指令
自定义主题无需再嵌套多层配置，语法更直观：css /* v4 自定义主题 */ @theme { --color-primary: #165DFF; --font-heading: 'Inter', sans-serif; --spacing-10: 2.5rem; } /* 直接使用：text-primary / font-heading / p-10 */ - 简化的自定义工具类
用@util指令快速定义工具类，无需编写复杂插件：css /* v4 自定义工具类 */ @util aspect-video { aspect-ratio: 16/9; } @util text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.1); } - 增强的条件变体
支持动态生成变体，满足复杂业务场景：css /* v4 条件变体 */ @when media(width >= 768px) { .md:text-lg { font-size: 1.125rem; } } - 更好的类型支持
内置 TypeScript 类型定义，配置文件（tailwind.config.ts）可获得完整的类型提示，减少配置错误。
注意事项
- v4 目前仍处于 beta 阶段（截至 2025 年底），生产环境使用需谨慎，部分边缘场景可能存在兼容问题；
- 对于旧项目迁移：v3 项目无需完全重构，v4 提供了迁移指南，核心工具类语法（如
bg-red-500/flex）完全兼容，主要适配点是构建集成方式（脱离 PostCSS）。
总结
- 性能是核心提升：v4 基于 Rust 重构核心，构建速度和内存占用远优于 v3；
- 使用更简单：零配置启动、内置嵌套/自动前缀、简化的自定义语法，降低上手和配置成本；
- 架构更独立：脱离 PostCSS 依赖，成为独立工具，灵活性和可维护性大幅提升；
- 兼容但需适配：核心工具类语法兼容 v3，但集成方式改变，旧项目迁移需调整构建配置。
如果你的项目是新启动的，优先考虑 v4（待正式版发布后）；如果是已有 v3 项目，可等待 v4 正式版稳定后逐步迁移，现阶段 v3 仍是生产环境的稳定选择。
