Tailwind 4.0 looks like it will be faster and better
Sergio Vergara
Sergio Vergara
April 29, 2024 — 3 minutes reading time
A new version of Tailwind 4.0 is coming soon
Photo by @Pankaj Patel on Unsplash
Tailwind is preparing a new high-performance engine for effective pakistan mobile numbers list Tailwind CSS, designed to simplify the developer experience and take advantage of how the web platform has evolved in recent years.
It's still early days and Tailwind has a lot of work to do , but they recently released progress and tagged the first public v4.0.0-alpha so you can start experimenting with it.
A new engine, built for speed
The new engine is a rewrite from scratch, using all the experience to date with the framework to better model improvements, making things faster with much less code.
Up to 10x faster: You can create a full Tailwind CSS website build in 105ms instead of 960ms, or with the Catalyst UI Kit in 55ms instead of 341ms.
Reduced weight: The new engine is more than 35% smaller once installed.
Rust where it counts: We've migrated some of the most parallelizable parts of the framework to Rust, while keeping the core of the framework in TypeScript for greater extensibility.
Only one dependency: The only thing the new engine depends on is Lightning CSS.
Custom Parser: The developers of the new Tailwind wrote their own CSS parser and designed their own data structure tailored to new needs, making parsing twice as fast as PostCSS.
Designed for the modern web
We're looking ahead to Tailwind CSS v4 and the team is looking to build a framework that feels cutting edge for years to come.
Native Cascading Layers – We now use real @layerrules, which solves a ton of specificity issues we’ve struggled with in the past.
Explicitly defined custom properties: We use @property to define internal custom properties with appropriate types and constraints, allowing us to do things like transition background gradients.
Using color-mix for opacity modifiers: Makes it easier than ever to use opacity modifier syntax when using CSS variables for colors, or even adjusting the opacity of currentColor.
Container queries in core: Added support for container queries directly to core, with new @min-* and @max-* variants for container query ranges.
Work is also underway to update the color palette with a wider range of colors and introduce support for other modern CSS features like @starting-style , anchor positioning, and more.