Tailwind CSS 4.0 发布，经过彻底重写，实现更快的 Rust 驱动构建

场长

前端 0 57 2025-01-27 10:38:22

Tailwind CSS 4.0 已经发布，承诺将构建时间提高 5 倍，下一步称增量构建提高 100 倍，同时提供新的 CSS 功能并可通过单个导入语句进行安装，但其技术文档指出核心功能需要最新的 Web 浏览器，这可能会限制最初的采用。

这个流行的 CSS 框架和工具集的主要功能是代号为“Oxide”的全新构建引擎。

该引擎比以前小 35%，虽然大部分都是用 TypeScript 编写的，但它包括用 Rust 重写的软件包，用于计算最耗费资源的操作，以及利用Lightning CSS，这是一个同样使用 Rust 编写的 CSS 解析器。

Tailwind CSS 4.0 现已针对 Vite JavaScript 和 TypeScript 构建工具进行了优化，并且拥有第一方 Vite 插件，根据Tailwind 创建者 Adam Wathan 的发布帖，该插件可提供“最高性能和最低配置”。

该框架中的新 CSS 功能包括级联层，它提供了结构化特异性，解决了 CSS 中最棘手的功能之一。另一个新功能是使用 CSS 注册的自定义属性，允许具有默认值的属性可以设置为继承或不继承其值。据 Wathan 称，使用这些现代功能简化了 Tailwind 的内部工作，使维护更加容易。

如何使用

在项目中包含 Tailwind 非常简单，只需添加以下内容：

@import"tailwindcss";

添加到 CSS 文件中即可，如果使用 npm（节点包管理器）安装了 Tailwind - 尽管 npm 不是必需的，并且你也可以使用独立工具。

例如，将框架与 Next.js 或 Angular 一起使用通常会使用 PostCSS 插件，或 SvelteKit 或 Astro 的 Vite 插件以及用于在任何项目中使用 Tailwind 的 CLI（命令行界面）工具。

配置已从 JavaScript 文件转移到 CSS 本身，使用主题变量。旧的 JavaScript 配置文件仍然受支持，但必须明确加载。

Tailwind CSS 4.0 中的调色板已从 rgb（红绿蓝）更改为 oklch（Oklab 颜色空间），增加了色度和色调坐标以获得更丰富的色彩。新的 3D 变换 API 允许缩放、旋转等。

开发者始终要警惕浏览器兼容性问题，而 Tailwind CSS 4.0 需要较新的浏览器，具体来说是 Chrome 120 或更高版本、Safari 16.4 或更高版本，或者 Firefox 128 或更高版本。

文档称这些是“核心功能”所必需的，而 Tailwind 3.0 的文档则更为宽容，建议开发人员如果针对旧版浏览器，则应避免使用不受支持的功能，早期的 Internet Explorer 放心吧，它不再受任何支持。

虽然提供了升级工具，但仍存在一些升级问题。它的完整的升级指南列出了重大更改。

Tailwind CSS 框架在 MIT 许可证下开源。与 Meta 的 Bootstrap 不同，Tailwind CSS 不包含高级组件（尽管这些组件在 TailwindUI 中可用，但需要商业许可）。

2023 年 CSS 现状调查（2024 年结果目前尚未公布）指出，“Tailwind CSS 是开发者乐于继续使用的主要 UI 框架之一”，使用率为 50.5%，留存率为 75.7%。Bootstrap 的使用率较高，但目前略有下降。这两个框架占据主导地位，排名第三的 Materialize CSS 的使用率为 21.7%。

结语

关于 Tailwind 优点的讨论显示出了不同的观点，包括使用原生 CSS 而不进行构建步骤的争论。

作者Wathan 正是因为在大型项目中维护 CSS 文件的挑战而创建了 Tailwind。人们对重大更改的数量有些不满，但正如一位开发人员所说， “更少的依赖和更好的性能总是受开发者欢迎的。”

然而，浏览器兼容性是一个问题，与大多数初始版本一样，开发人员会对生产的早期采用持谨慎态度，直到他们确信它适用于自己的用户。