Tailwind CSS v4.0 发布

Holy shit it's actually done ！

1 月 22 日，Tailwind CSS 正式发布了 4.0 版本，针对性能和灵活性进行了优化，重新构想了配置和定制体验，并充分利用了 Web 平台提供的最新进展。

• 新的高性能引擎- 完整构建速度提高 5 倍，增量构建速度提高 100 倍以上 - 以微秒为单位。
  • 专为现代网络而设计@property— 基于诸如级联层、使用、注册的自定义属性等尖端 CSS 功能构建color-mix()。
  • 简化安装- 更少的依赖项、零配置，并且只需 CSS 文件中的一行代码。
  • 第一方 Vite 插件——紧密集成，实现最高性能和最低配置。
  • 自动内容检测——您的所有模板文件都会被自动发现，无需配置。
  • 内置导入支持——无需额外的工具即可捆绑多个 CSS 文件。
  • CSS 优先配置——重新构想的开发人员体验，您可以直接在 CSS 中自定义和扩展框架，而不是使用 JavaScript 配置文件。
  • CSS 主题变量——所有设计令牌都公开为原生 CSS 变量，因此您可以在任何地方访问它们。
  • 动态效用值和变体——停止猜测间距尺度中存在什么值，或者扩展诸如基本数据属性之类的配置。
  • 现代化的 P3 调色板——重新设计的、更生动的调色板，充分利用了现代显示技术。
  • 容器查询——根据容器大小对元素进行样式设置的一流 API，无需插件。
  • 新的 3D 变换实用程序— 直接在 HTML 中变换 3D 空间中的元素。
  • 扩展渐变 API — 径向和圆锥渐变、插值模式等。
  • @starting-style 支持——您可以使用此新变体来创建进入和退出转换，而无需 JavaScript。
  • not-* variant — 仅当元素与另一个变体、自定义选择器或媒体或功能查询不匹配时才设置元素样式。
  • 更多新实用程序和变体color-scheme— 包括对、、field-sizing复杂阴影inert等的支持。

立即开始使用 Tailwind CSS v4.0，将其安装在新项目中，或直接在其安装在新项目中，或直接在其安装在新项目中，或直接在其安装在新项目中，或直接在其安装在新项目中，或直接在Tailwind Play上的浏览​​器中使用它。

对于现有项目，我们发布了全面的升级指南并构建了自动升级工具，以便您尽快、轻松地获得最新版本。

新型高性能引擎

Tailwind CSS v4.0 是对该框架的彻底重写，它吸收了我们多年来对架构的所有了解，并对其进行了优化，使其尽可能快。

当我们对自己的项目进行基准测试时，我们发现完全重建速度提高了 3.5 倍以上，增量构建速度提高了 8 倍以上。

以下是我们对 Tailwind CSS v4.0 与Catalyst进行基准测试时看到的平均构建时间：

最令人印象深刻的改进是增量构建，实际上不需要编译任何新的 CSS — 这些构建速度快 100 倍以上，并在几微秒内完成。而且你在项目上工作的时间越长，你遇到的这些构建就越多，因为你只是使用以前已经使用过的类，例如flex、col-span-2或font-bold。

专为现代网络而设计

自我们发布 Tailwind CSS v3.0 以来，平台已经有了很大的发展，而 v4.0 充分利用了其中的许多改进。