Tailwind CSS 4.0 Beta Released with Native CSS Variables

by Ada
Last updated on May 24, 2024
Tailwind CSS 4.0 Beta Released with Native CSS Variables

Tailwind Labs has released the first beta of Tailwind CSS 4.0, featuring a complete rewrite of the engine using native CSS features and offering dramatic performance improvements.

Lightning-Fast Build Times

The new Rust-based engine delivers incredible performance:

  • 5x faster initial builds
  • 100x faster incremental rebuilds
  • Near-instant CSS generation in watch mode

CSS-First Architecture

Tailwind 4.0 embraces modern CSS features, using native CSS variables, cascade layers, and container queries. This results in smaller stylesheets and better browser compatibility.

Unified Configuration

Configuration is now handled directly in CSS using @theme directives, eliminating the need for a separate JavaScript configuration file. This makes Tailwind easier to integrate with any build tool or framework.

Improved IntelliSense

The VS Code extension has been updated to work seamlessly with the new configuration format, providing better autocomplete and hover documentation for custom utilities.

Zero-Config Container Queries

Container queries are now built-in and work without any configuration, making responsive component design simpler than ever.