Tailwind CSS 发布 4.2.0 版本，对于这个“工具类优先（ utility-first ）”的 CSS 框架，这是一次幅度不大但意义重大的更新，其构建基础是 v4.0 版本中做过重大改版的架构。该版本于 2026 年 2 月 18 日发布，包含一个原生 Webpack 插件、四套新的默认配色方案、经过扩展的逻辑属性工具类，以及显著提升的重新编译速度——这些改进在前端社区引起了广泛的的关注。
对许多团队而言，这次更新的最大亮点是新增的 @tailwindcss/webpack 插件，它能将 Tailwind 集成到 webpack 构建流程中，而且不需手动配置 PostCSS。此前，使用 webpack 的开发者需要通过 PostCSS 来集成 Tailwind，这会增加冗余代码，与 v4.0 版本自带的简洁的 Vite 集成形成了鲜明的对比。而这个新插件则大大简化了这一过程。
这使得 Webpack 项目在集成简便性方面赶上了 Vite ，对于那些正在维护成熟应用程序、但目前尚无法迁移构建工具的团队而言，这一改进尤为可贵。
在视觉方面，4.2 版本为 Tailwind 的默认主题新增了四种命名配色方案：淡紫色（ mauve ）、橄榄绿（ olive ）、雾色（ mist ）和灰褐色（ taupe ）。这些低饱和度且偏中性的色调反映了设计趋势正逐渐远离高饱和度配色，给使用 Tailwind 内置主题的设计师提供了更大的表达空间，而无需进行自定义配置。
在这次发布中，逻辑属性支持得到了显著的扩展。Tailwind 现在已经提供了用于块方向填充（pbs-*、pbe-*）、边距（mbs-*、mbe-*）、边框（border-bs、border-be）、滚动填充和滚动边距的工具类，同时还新增了直接映射到 CSS inline-size 和 block-size 属性的内联和块大小工具类。对于开发国际化产品的团队而言，这些新增功能尤为重要，因为它们必须考虑从右到左或垂直书写模式。早期版本中引入的 start-* 和 end-* 工具类已被弃用，取而代之的是语义更贴合的 inline-s-* 和 inline-e-* 工具类。在 LinkedIn 上，有开发者指出了这一变化的重要性，其中一篇博文指出，就多语言布局而言，“逻辑属性是 CSS 的未来”。
对于这次发布，讨论最热烈的一个方面或许是重新编译性能的显著提升。Vercel Next.js 负责人 Tim Neutkens 在 X 上发文称，在对 Tailwind 的编译速度进行研究后，他在他们最大的应用程序上做了测试，重新编译速度提升了 3.8 倍：
Tailwind CSS 4.2.0 在性能方面有了显著的提升。
我们在最大的应用程序上测试发现，重新编译（做任何编辑）速度提升了 3.8 倍。
适用于 Next.js、Vite、Webpack 和 PostCSS 集成。
对于仍在使用 Tailwind CSS v3 的团队而言，升级到 v4 仍然需要单独的步骤，而且比较复杂。Tailwind 提供了一份专门的升级指南，涵盖了 v3 与 v4 之间的所有破坏性变更，包括转为“ CSS 优先”配置、@apply 行为变化，以及更新的浏览器支持要求（Safari 16.4+、Chrome 111+、Firefox 128+）。此外，开发者还可以通过 npx @tailwindcss/upgrade 获取自动迁移工具，这可以处理大部分机械性变更。使用 @apply 的团队指出，新版本还存在一些不完善之处，GitHub 上有篇冗长的讨论，记录了一个依赖该功能的组件库需要额外重构的案例。
Tailwind CSS 是一个工具类优先的 CSS 框架，它提供可组合的底层类，供开发人员直接在标记中进行样式设置。开发团队无需为每个组件编写专属的 CSS，而是通过预定义的工具类（并可通过配置进行扩展）来构建设计。这不仅能加快 UI 开发速度，还能确保整个代码库中样式的统一性。
声明：本文为 InfoQ 翻译，未经许可禁止转载。
原文链接：https://www.infoq.com/news/2026/04/tailwind-css-4-2-webpack/
