Tailwind CSS 4.0实战：原子化CSS的进化
Tailwind CSS 4.0 in Practice: The Evolution of Utility-First CSS
| iDev Tech | 2026-07-20T14:00:00
全面解读Tailwind CSS 4.0的重大更新，包括Oxide引擎、CSS-first配置和性能突破。
Comprehensive look at Tailwind CSS 4.0 major updates including the Oxide engine, CSS-first configuration, and performance breakthroughs.
Oxide引擎Tailwind CSS 4.0的核心是全新的Oxide引擎——用Rust重写的编译器。构建速度较3.x提升10倍，增量编译几乎即时完成。新引擎还支持自动内容检测，无需手动配置content数组。CSS-first配置4.0最大的范式转变是从tailwind.config.js迁移到CSS-first配置。所有自定义主题、插件和变体都在CSS文件中通过@theme、@plugin和@variant指令定义。这让配置更接近CSS本身，也更容易与其他工具集成。新特性容器查询（@container）原生支持；3D变换工具类；渐变色增强（支持径向渐变和锥形渐变）；子网格（subgrid）支持；动态视口单位（dvh/svh/lvh）。从3.x迁移：官方提供了自动升级工具 @tailwindcss/upgrade。
Oxide EngineAt the core of Tailwind CSS 4.0 is the new Oxide engine — a compiler rewritten in Rust. Build speeds improve 10x over 3.x, with incremental compilation completing almost instantly. The new engine also supports automatic content detection, eliminating manual content array configuration.CSS-First ConfigurationThe biggest paradigm shift in 4.0 is moving from tailwind.config.js to CSS-first configuration. All custom themes, plugins, and variants are defined in CSS files using @theme, @plugin, and @variant directives. This brings configuration closer to CSS itself and improves tool integration.New FeaturesNative container queries (@container); 3D transform utilities; gradient enhancements (radial and conic gradients); subgrid support; dynamic viewport units (dvh/svh/lvh). Migrating from 3.x: official upgrade tool @tailwindcss/upgrade available.