Tailwind CSS v4.0 正式版发布

🔗 TailwindCSS Blog

这是框架的全新版本，专注于性能和灵活性的优化，重新设计了配置和定制体验，并充分利用了 Web 平台的最新进展。

主要特性

• 全新高性能引擎：完整构建速度提升最多 5 倍，增量构建速度提升超过 100 倍，构建时间以微秒计。
• 为现代 Web 而设计：基于最前沿的 CSS 特性构建，包括 cascade layers、使用 @property 注册的自定义属性、以及 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 Play 使用 Tailwind CSS v4.0。

对于现有项目，Tailwind Labs 发布了一份全面的升级指南 ，并构建了一个自动升级工具，帮助你尽可能快速、无痛地升级到最新版本。