DEV Community
·
如何在Vite应用中设置Tailwind CSS v4.0
内容提要
本文介绍了如何在Vite应用中设置Tailwind CSS v4.0，该版本于2023年1月发布，具有更快的构建速度和内置导入功能。安装步骤包括通过npm安装、在Vite配置中添加插件以及在CSS文件中导入Tailwind。若从v3升级，需查看升级指南并更新Node.js环境。v4.0支持现代浏览器，旧版浏览器需继续使用v3.4。
关键要点
-
Tailwind CSS v4.0于2023年1月发布，具有更快的构建速度和内置导入功能。
-
安装Tailwind CSS v4.0需要通过npm安装tailwindcss和@tailwindcss/vite。
-
在Vite配置中添加@tailwindcss/vite插件，并在CSS文件中导入Tailwind。
-
从v3升级到v4.0时，需要查看升级指南并更新Node.js环境至20或更高版本。
-
v4.0支持现代浏览器，旧版浏览器需继续使用v3.4。
延伸解读
Tailwind CSS v4.0的性能优势
Tailwind CSS v4.0引入了高性能引擎，构建速度显著提升，完整构建速度提高了5倍，增量构建速度更是提升了100倍。这意味着开发者在使用该版本时，可以更快地进行开发和测试，提升整体工作效率。
升级注意事项
从v3升级到v4.0时，开发者需确保Node.js环境更新至20或更高版本。此外，需仔细阅读升级指南，了解新版本的变化，以避免在迁移过程中遇到不必要的问题。
浏览器支持要求
Tailwind CSS v4.0支持现代浏览器，包含一些新特性如@property和color-mix()，这些特性在旧版浏览器中无法使用。因此，如果项目需要兼容旧版浏览器，建议继续使用v3.4，直到需求变化。
延伸问答
如何在Vite应用中安装Tailwind CSS v4.0？
通过npm安装tailwindcss和@tailwindcss/vite，然后在Vite配置中添加插件，并在CSS文件中导入Tailwind。
Tailwind CSS v4.0有哪些新特性？
v4.0具有更快的构建速度、内置导入功能和设计令牌作为原生CSS的支持。
从Tailwind CSS v3升级到v4.0需要注意什么？
需要查看升级指南，更新Node.js环境至20或更高版本，并更改Vite配置。
Tailwind CSS v4.0支持哪些浏览器？
v4.0支持Safari 16.4+、Chrome 111+和Firefox 128+，旧版浏览器需使用v3.4。
如何在Vite配置中添加Tailwind CSS插件？
在vite.config.js文件中导入tailwindcss，并在plugins数组中添加tailwindcss()。
Tailwind CSS v4.0的构建速度相比于v3如何？
v4.0的全构建速度比v3快5倍，增量构建速度快100倍。
