DEV Community
·
如何在Vite应用中设置Tailwind CSS v4.0
💡
原文英文，约600词，阅读约需3分钟。
📝
内容提要
本文介绍了如何在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。
❓
延伸问答
如何在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倍。
➡️
