The heart of this update is a thorough revision of how Tailwind CSS works. While previous versions focused mainly on expanding functionality, version 4 concentrates on optimizing the underlying architecture. The result? A framework that's up to 10 times faster than its predecessor, with a 35% smaller footprint and an improved developer experience that better aligns with modern web standards.
Tailwind CSS v4: 10x faster with new Oxide engine
The next revolution in the popular CSS framework focusing on speed, simplicity and a modern developer experience
Tailwind CSS v4: The next evolution in modern web development
In the landscape of modern web development, Tailwind CSS has established itself as one of the most popular CSS frameworks. With the announcement of version 4.0, the framework takes a significant leap forward in performance, ease of use, and modern web technologies. This new version, completely rewritten with the new Oxide engine, not only promises a dramatic acceleration in development time but also introduces a more natural, CSS-focused approach to styling.
Author: Allard Rothengatter
Published: 12 December, 2024
Tailwind CSS v4: the update
De nieuwe Oxide engine: gebouwd voor snelheid
Het kloppend hart van Tailwind CSS v4 is de nieuwe Oxide engine, een compleet herontworpen fundament dat is geschreven in Rust. Deze fundamentele verandering brengt indrukwekkende prestatieverbeteringen met zich mee die direct merkbaar zijn in het dagelijkse ontwikkelproces.
De cijfers spreken voor zich: waar het bouwen van de Tailwind CSS website voorheen 960ms duurde, is dit nu teruggebracht naar slechts 105ms. De Catalyst UI kit wordt zelfs nog sneller verwerkt: van 341ms naar 55ms. Deze versnelling is niet alleen merkbaar bij grote projecten - ook kleinere websites profiteren van de verbeterde prestaties.
Rust als basis
De keuze voor Rust als programmeertaal voor kritieke onderdelen van het framework is strategisch. Rust staat bekend om zijn snelheid en efficiëntie, terwijl de kern van het framework in TypeScript blijft voor maximale uitbreidbaarheid. Deze hybride aanpak zorgt voor:
Compact
A 35% smaller installation footprint
Optimisation
Better process parallelization
Speed
A custom CSS parser that's 2x faster than PostCSS
Dependencies
Minimal dependencies - only Lightning CSS is required
A new frontend experience
Experience
Streamlined Development
The new developer experience
Tailwind CSS v4 transforms from a pure CSS framework into a complete, integrated solution for processing your CSS. By integrating Lightning CSS directly into the framework, configuring your CSS pipeline is significantly simplified.
The new version eliminates the need for various separate tools and plugins. Where you previously needed external configuration for basic functionality, these are now available by default in the framework. The automatic processing of @import statements now happens without additional setup, vendor prefixing is automatically applied, and there's native support for nested CSS.
Intelligent
Automatic Detection
Zero-configuration workflows
One of the most notable improvements is the intelligent way Tailwind processes your project files. The framework finds your template files automatically, making smart use of project structures. It automatically scans your project, takes into account excluded folders in your .gitignore, and works seamlessly with modern build tools like Vite.
This means that in many cases, you no longer need manual configuration to specify where your template files are located. The new approach ensures a smoother workflow where developers can focus on building their application instead of configuring their tools.
Modernity
CSS-first Approach
Intuitive configuration
With version 4, Tailwind embraces a more natural, CSS-focused approach. Instead of extensive JavaScript configurations, you now use native CSS variables and @theme directives. This provides a more intuitive way of working that directly aligns with modern CSS practices:
@import "tailwindcss";
@theme {
--font-family-display: "Satoshi", "sans-serif";
--breakpoint-3xl: 1920px;
--color-neon-pink: oklch(71.7% 0.25 360);
}This approach makes configuring your styling not only simpler but also more consistent with how modern CSS works. It enables developers to define their themes and customizations in a way that feels more natural and better aligns with current web standards.
New Features & Improvements
Besides improved performance and developer experience, Tailwind CSS v4 introduces several powerful new features that further expand the framework's capabilities.
Composable Variants
One of the most notable new capabilities is the improved composability of variants. Developers can now freely combine variants such as group-*, peer-*, has-*, and the new not-* variant. This flexibility enables the creation of more complex styling patterns without additional JavaScript. For example:
<div class="group">
<div class="group-has-[&:focus]:opacity-100">
<!-- Content -->
</div>
</div>Container Queries
With the introduction of native container query support, responsive design becomes even more powerful. Instead of only responding to viewport size, you can now adjust styling based on the size of a container element:
@container (min-width: 800px) {
.sidebar {
width: 15%;
}
}Enhanced Color Manipulation
The new version utilizes modern CSS features like color-mix for opacity modifiers, making working with colors and transparency more intuitive. This is particularly useful when using CSS variables for colors or adjusting the opacity of currentColor.
Tailwind CSS v4 marks a turning point in modern web development: where performance meets simplicity. With the new Oxide engine, we're not just building faster, we're building smarter.
– Adam Wathan, Tailwind CSS
Important Changes & Migration
The upgrade to Tailwind CSS v4 introduces several important changes. Various deprecated utilities have been removed, including text-opacity-*, flex-grow-*, and decoration-slice, which have been replaced with more modern alternatives.
A significant architectural change is the separation of the framework into separate packages. The PostCSS plugin and CLI tools are now separated from the main package, meaning they need to be installed separately. Additionally, default values have been modified: the border utility no longer has a default color, and the ring utility now defaults to 1px instead of 3px.
For a smooth migration, it's important to first update your packages, then adjust your configuration, and finally thoroughly test your application for any breaking changes.
The foundation for the future
Tailwind CSS v4 represents a significant step forward in the framework's evolution. The complete rewrite with the Oxide engine, combined with the modern developer experience and new features, makes this version a powerful upgrade for both new and existing projects.
With a roadmap extending beyond summer 2024, the team behind Tailwind CSS continues to build further improvements. The focus remains on refining the developer experience and adding support for the latest web standards.
For developers considering the upgrade, v4 offers compelling benefits: significantly better performance, a more intuitive configuration experience, and modern features that accelerate the development process. While the alpha version is already available for experimental purposes, it's recommended to wait for the stable release expected later this year for production environments.
More interesting reads
The Laravel TALL stack: Efficiency, flexibility, and innovation in software development
4 Sep 2024 by Johan Zandstra
When developing software, choosing the right tech stack is crucial. The Laravel TALL stack —consisting of Tailwind CSS, Alpine.js, Laravel, and Livewire— offers a modern, efficient solution that brings significant benefits to both developers and clients. From faster development times to reduced costs and greater flexibility, the TALL stack enables seamless collaboration and the quick delivery of high-quality software products. In this article, we’ll explore how this stack adds value for both parties.
Custom software development doesn't have to be expensive or complex
6 May 2024 by Alan Linnenbank
Finding the right software that perfectly meets the unique requirements of your business is crucial, but can be challenging. Custom software offers solutions that are specifically tailored to your needs, but also comes with disadvantages. At Dolphiq, we recognize and understand these challenges, and based on our years of experience, we have developed Qore.works to effectively address them. Through our agile approach, we can meet your software needs flexibly and efficiently.