DEV Community
·
Tailwind CSS 4：新特性与配置
💡
原文约1100字/词，阅读约需4分钟。
📝
内容提要
Tailwind CSS 4 版本带来了性能提升和新功能，安装更简单，支持 PostCSS 和 Vite 插件。配置方式从 JavaScript 转为 CSS，允许在 CSS 文件中定义自定义设置。新增颜色和实用工具增强了开发灵活性，并支持容器查询，提升响应式设计能力。
🎯
关键要点
- Tailwind CSS 4 版本带来了显著的性能提升和新功能。
- 安装过程变得更加简单，可以通过 PostCSS 和 Vite 插件集成。
- 配置方式从 JavaScript 转为 CSS，允许在 CSS 文件中直接定义自定义设置。
- 新增的颜色和实用工具增强了开发灵活性。
- 支持容器查询，提升了响应式设计能力。
- 迁移到版本 4 可以使用官方的迁移助手，确保兼容性。
- 类名进行了重命名以提高一致性和可用性。
- 默认边框颜色从 gray-200 改为 currentColor，减少限制。
- 自定义实用工具的定义方式发生变化，使用新的 @utility API。
- 更新的颜色调色板使用 OKLCH 色彩空间，使颜色更加鲜艳。
- Tailwind CSS 4 版本显著提高了前端开发的生产力和灵活性。
➡️
