Tailwind CSS v4.0 升级与 Astro 5.2 项目迁移记录

最新推荐文章于 2025-07-01 12:41:47 发布

原创

最新推荐文章于 2025-07-01 12:41:47 发布 · 1.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #tailwind

本文博客链接 https://ysx.cosine.ren/tailwind-update-v4-migrate

自用小记。

Tailwind CSS v4.0 - Tailwind CSS

新的高性能引擎 - 完整构建的速度速度快 5 倍，增量构建的速度快于 100 倍以上 —— 以微秒为单位进行测量。
为现代 Web 设计 - 建立在前沿的 CSS 特性之上，使用级联层、 @property 和 color-mix() 等前沿 CSS 特性注册自定义属性。
简化的安装 - 较少的依赖项，零配置，只需要 CSS 文件中的一行代码。
第一方 Vite 插件 - 紧密集成，可实现最高性能和最低配置。
自动内容检测 - 所有模板文件都是自动发现的，无需配置。
内置导入支持 - 无需额外工具即可捆绑多个 CSS 文件。
CSS-First 配置 - 重新设计的开发人员体验，您可以直接在 CSS 而不是 JavaScript 配置文件中自定义和扩展框架。
CSS 主题变量 - 您的所有 design tokens 都以原生 CSS 变量的形式暴露，因此您可以在任何地方访问它们。
动态实用程序值和变体 - 不再需要猜测间距中存在哪些值，也不再需要为基本数据属性等扩展配置。
现代化的 P3 调色板 - 重新设计的更加生动的调色板，充分利用了现代展示技术。
容器查询 - 可使用容器查询根据容器大小为元素设计样式，不再需要插件
新的 3D 变换实用程序 - 直接在 HTML 中的 3D 空间中变换元素，添加了用于进行 3D 变换的 API，例如 rotate-x-* ， rotate-y-* ， scale-z-* ， translate-z-* 和更多。
扩展的梯度 API - 径向和圆锥梯度，插值模式等。现在，线性梯度将角度作为值支持，因此您可以使用bg-linear-45等实用程序以 45 度角创建梯度。将bg-gradient-*重命名为bg-linear-*
@starting-style support - 新的starting变体增加了对新的 CSS @starting-style 功能的支持，从而在首次显示元素时可以过渡元素属性：
not-* variant - 仅在元素不匹配另一个变体，自定义选择器或媒体或功能查询时样式。
甚至更多的新实用程序和变体，包括对color-scheme的支持， field-sizing ，复杂的阴影， inert等。