技术分享
Tailwind CSS v4 迁移指南:CSS-first 配置实战
Tailwind v4 用 CSS 变量与 @theme 取代了 JS 配置文件,迁移过程有哪些坑?一次讲清楚。
Tailwind CSS v4 最大的变化是全面 CSS-first:不再需要 tailwind.config.js,主题通过 CSS 中的 @theme 指令定义,插件体系也改为原生 CSS 优先。
迁移时最常见的坑有三个:一是 @apply 在自定义 CSS 中解析时机变化,涉及动态类名的写法需要调整;二是默认边框色从 gray-200 变为 currentColor,视觉细节需要检查;三是 PostCSS 插件必须替换为 @tailwindcss/postcss 才能配合 Turbopack 工作。
v4 的好处也很明显:样式生成更快、配置更直观、与设计令牌的映射更自然。对于新项目,直接使用 v4 是明确的推荐;存量项目迁移建议留出半天到一天做视觉回归。