DEV Community
·
Tailwind 版本 4 的激动人心的更新 🚀
💡
原文英文，约700词，阅读约需3分钟。
📝
内容提要
Tailwind CSS v4.0 进行了重大改进，性能显著提升，构建速度提高至5倍和100倍。新版本支持CSS配置，采用oklch颜色系统，默认支持容器查询和字段大小调整。新增变体可针对所有后代元素，简化内嵌阴影和环的创建。
🎯
关键要点
- Tailwind CSS v4.0 进行了重大改进，性能显著提升。
- 完整构建速度提高至5倍，增量构建速度提高至100倍。
- 新版本采用统一工具链，简化了项目配置。
- 配置方式从JS文件转向CSS配置，直接在CSS中配置插件和主题。
- Tailwind v4 支持最新的CSS特性，包括oklch颜色系统。
- 默认支持容器查询，允许根据容器大小调整样式。
- 支持字段大小调整，简化了自动调整文本区域的过程。
- 新增变体可针对所有后代元素，简化样式应用。
- 新增内嵌阴影和环的创建类，提升设计灵活性。
- 更多新特性可在Tailwind官方网站查看。
❓
延伸问答
Tailwind CSS v4.0 的性能提升有多大？
Tailwind CSS v4.0 的完整构建速度提高至5倍，增量构建速度提高至100倍。
Tailwind v4.0 采用了什么新的颜色系统？
Tailwind v4.0 采用了基于oklch的颜色系统，取代了传统的rgb颜色系统。
Tailwind v4.0 如何支持容器查询？
Tailwind v4.0 默认支持容器查询，允许根据容器的大小调整样式。
Tailwind v4.0 中新增了哪些样式变体？
Tailwind v4.0 新增了可针对所有后代元素的变体，简化了样式应用。
如何在 Tailwind v4.0 中配置插件和主题？
Tailwind v4.0 将配置方式从JS文件转向CSS配置，直接在CSS中配置插件和主题。
Tailwind v4.0 中如何创建内嵌阴影和环？
可以使用 inset-shadow 和 inset-ring 类来轻松创建内嵌阴影和环。
➡️
