DEV Community
·
Tailwind CSS v4.0：新功能与改进
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
Tailwind CSS v4.0 进行了重大更新，提升了性能和配置简化，新增功能。主要改进包括重写引擎、加快构建速度、减少包体积、简化安装、将配置从 JavaScript 转为 CSS、自动检测内容源、更新色彩调色板以及引入动态工具值和变体。这些改进提升了开发的灵活性和效率。
🎯
关键要点
- Tailwind CSS v4.0 进行了重大更新，提升了性能和配置简化，新增功能。
- 高性能引擎：重写后，完全重建速度提高了3.5倍，增量构建速度提高了8倍。
- 包体积减少超过35%。
- 安装过程简化，无需使用 @tailwind 指令和外部插件。
- 配置从 JavaScript 转为 CSS，简化了配置过程。
- 自动检测内容源，消除了手动配置内容数组的需要。
- 更新了默认色彩调色板，使用 oklch 色彩模型，提供更丰富的色彩。
- 引入动态工具值和变体，允许更灵活的样式设置。
- 将 Tailwind CSS v4.0 集成到 Next.js 项目中变得更加简单，减少了额外配置文件的需求。
❓
延伸问答
Tailwind CSS v4.0 的主要更新内容是什么？
Tailwind CSS v4.0 进行了重写，提升了构建速度，减少了包体积，简化了安装和配置，并更新了色彩调色板。
Tailwind CSS v4.0 如何提高构建速度？
全重建速度提高了3.5倍，增量构建速度提高了8倍。
Tailwind CSS v4.0 的安装过程有什么变化？
安装过程简化，无需使用 @tailwind 指令和外部插件，只需通过 npm 安装即可。
Tailwind CSS v4.0 的配置方式有什么不同？
配置从 JavaScript 转为 CSS，允许在样式表中直接定义自定义设置。
Tailwind CSS v4.0 如何处理内容源的检测？
Tailwind CSS v4.0 自动检测内容源，消除了手动配置内容数组的需要。
Tailwind CSS v4.0 引入了哪些新的色彩特性？
更新了默认色彩调色板，使用 oklch 色彩模型，提供更丰富的色彩和更高的色彩鲜艳度。
➡️
