Tailwind CSS v4 marks a significant architectural overhaul, representing a complete ground-up rewrite of the framework. This foundational shift is driven by a new high-performance engine named Oxide, which replaces the previous JIT (Just-In-Time) compiler. The move to Oxide aims to deliver substantial performance improvements and a more robust, streamlined development experience for users.
One of the most notable changes is the reimagined configuration model. Instead of relying on a separate tailwind.config.js file, v4 moves configuration directly into your CSS files using the new @theme directive. This approach prioritizes a "designer-token-first" workflow, allowing developers to define their design tokens and theme values directly where styles are written. Furthermore, v4 has shed its external PostCSS dependency, now shipping with its own integrated solutions, including a dedicated Vite plugin and Lightning CSS integration for faster processing and a more cohesive development environment. This simplification reduces external tool chain complexities.
These architectural refinements translate into tangible performance gains. For instance, cold-build times on larger projects have seen dramatic reductions; a project with 50,000 lines of CSS could experience build times dropping from approximately 960ms to around 100ms. This is a testament to the efficiency of the new Oxide engine. While the next lesson will delve into specific syntax changes, it's worth noting that v4's new architecture lays the groundwork for more intuitive theme integration and powerful custom styling capabilities, preparing you for adapting to its core syntax and features.