DEV Community
·
新特性与迁移指南：Tailwind CSS v4.0
内容提要
Tailwind CSS 4.0发布，带来重要更新和简化。提供迁移工具以自动更新依赖和配置，需Node.js 20以上。主要变化包括移除旧指令、重命名工具类和更新默认样式。建议使用迁移工具并进行测试，以确保项目顺利过渡。
关键要点
-
Tailwind CSS 4.0发布，标志着框架的重要里程碑。
-
提供迁移工具以简化过渡，自动更新依赖和配置，需Node.js 20以上。
-
旧指令如@tailwind base;被简单的导入语句@import 'tailwindcss';替代。
-
一些工具类被移除或重命名以提高一致性，如bg-opacity-*变为bg-black/50。
-
尺寸类名如shadow-sm被重命名为shadow-xs以提高清晰度。
-
默认环类的大小从3px更改为1px，以与边框和轮廓对齐。
-
新的@utility API取代了旧的@layer工具，提供更清晰的自定义工具定义方式。
-
为Vite提供了专用插件以增强开发体验。
-
Tailwind CLI已移至专用包中，使用方式为npx @tailwindcss/cli -i input.css -o output.css。
-
默认边框颜色现已与currentColor对齐，placeholder颜色为当前文本的50%不透明度。
-
建议使用迁移工具，测试项目并查阅文档以确保顺利迁移。
延伸问答
Tailwind CSS 4.0的主要更新内容是什么？
Tailwind CSS 4.0移除了旧指令，重命名了一些工具类，并更新了默认样式，提供了迁移工具以简化过渡。
如何使用Tailwind CSS的迁移工具？
使用命令$npx @tailwindcss/upgrade@next运行迁移工具，它会自动更新依赖和配置，需Node.js 20以上。
Tailwind CSS 4.0中有哪些工具类被重命名？
例如，bg-opacity-*被替换为bg-black/50，shadow-sm被重命名为shadow-xs。
Tailwind CSS 4.0的默认边框颜色有什么变化？
默认边框颜色现在与currentColor对齐，提供更一致的样式。
迁移到Tailwind CSS 4.0时需要注意哪些事项？
建议使用迁移工具，进行项目测试，并查阅文档以确保顺利迁移。
Tailwind CSS 4.0中引入了什么新的API？
新的@utility API取代了旧的@layer工具，提供更清晰的自定义工具定义方式。
