Tailwind CSS v4: A New Era for the Framework

Tailwind CSS 4.0 has arrived, bringing not only performance improvements but a true paradigm shift in the way we write utility CSS. This version represents a reimagining of how we develop with this tool, while also delivering a complete development experience that is simpler, more modern, and fully integrated with the latest CSS features.

Whether you already use it day to day in personal projects, React or Next.js applications, or other modern stacks, this article will guide you through the main new features, showing how these changes impact and improve your coding routine.

A new high-performance engine

The first new feature is the complete rebuild of its internal engine. According to the official team, full builds are now up to 5 times faster, while incremental builds (the ones that happen every time you save a file) can be 100 times faster, with times measured in microseconds.

In practice, this means CSS is recompiled almost instantly, providing a much more agile development flow. On top of that, in large projects with hundreds of components, things become lighter and more responsive, and working with tools like Vite and Next.js flows much more naturally.

Much simpler installation and setup

The installation process has become much simpler and more straightforward. Before, setting up Tailwind in a project required several steps and extra files. Now, the team has reworked the entire experience into something they describe as "almost plug and play."

Previously, you had to include three directives in the main stylesheet:

@tailwind base;
@tailwind components;
@tailwind utilities;

These directives have now been replaced by a single line that already imports everything automatically:

@import "tailwindcss";

The result is a faster, cleaner, and lighter setup, perfect for anyone who wants to start new projects without worrying about multiple configuration files.

💡 The core idea behind this change is precisely to eliminate the initial complexity and make Tailwind more accessible from the very first use.

To see what the installation process looks like across different tools, check the official documentation: Installing Tailwind CSS

Native integration with Vite

One of the most interesting new features is the native integration with Vite, which now has an official plugin. This change brings a much faster and more efficient development experience.

In short, this means:

• Less time spent on configuration.
• Virtually instant real-time updates (Hot Module Reload).
• Automatically optimized builds.

In practice, the configuration is simple:

In the Vite configuration file (vite.config.js or vite.config.ts), you just add the Tailwind plugin:

import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

This plugin significantly improves integration and performance, making Tailwind a "first-class citizen" within the Vite ecosystem, and for anyone working with React, Vue, or Svelte using Vite, the difference in performance and simplicity is noticeable.

PostCSS and AutoPrefixer

In earlier versions of Tailwind, it was common to manually install and configure PostCSS and Autoprefixer, especially in Vite projects. But in this new version, that step is no longer necessary.

This happens because the new official Vite plugin already handles the entire integration. In other words, you install only the main Tailwind package (tailwindcss) and the dedicated Vite plugin (@tailwindcss/vite), configuring everything directly in vite.config.js, as mentioned earlier.

This approach eliminates the need for the postcss.config.js file and the manual Autoprefixer configuration, greatly simplifying the setup.

Before, it was done like this: (postcss.config.js)

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Now with Tailwind v4 and Vite:

import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Something important to note:

Tailwind still works as a PostCSS plugin, through the @tailwindcss/postcss package, and this alternative is better suited for projects where PostCSS is already an essential part of the stack, such as Next.js or Angular, or in cases that require advanced post-processing configurations.

To see the installation with PostCSS, here's the documentation link: Installing Tailwind CSS with PostCSS

With that, this version brings the best of both worlds: a simplified setup for those using Vite and flexibility for those who need more specific setups.

Automatic content detection

In previous versions, one of the most tedious steps was manually configuring the paths to HTML, JSX, TSX, and other files inside tailwind.config.js.

Now, that's a thing of the past.

The framework now features automatic content detection, which means it analyzes the project and automatically identifies where the utility classes are being used. The result is a much more convenient experience: less configuration, less risk of errors, and a more agile, intuitive workflow, especially in projects that grow quickly or involve multiple directories.

Native support for multiple imports

Another significant improvement is the native support for multiple imports in CSS, again without the need for external tools like PostCSS.

This means you can organize your styles into different files and import them simply and directly:

@import "tailwindcss";
@import "./buttons.css";
@import "./layout.css";

Tailwind processes all these files in an integrated way, maintaining build performance and consistency. This approach is especially useful in projects that adopt a modular component architecture, allowing for cleaner, more organized, and easier-to-maintain code.

Configuration directly in CSS: a new paradigm

Among the most striking changes in Tailwind CSS 4.0 is the adoption of a "CSS-first" approach, meaning that customizing the framework can now be done directly in CSS, reducing or even eliminating the dependency on the tailwind.config.js file.

The big new feature is the new @theme directive, which lets you define native design tokens such as colors, spacing, typography, and borders:

@theme {
  --color-primary: #2563eb;
  --font-sans: "Inter", sans-serif;
  --radius-md: 8px;
}

This change represents a real step forward in the integration between Tailwind and CSS itself, making the stylesheet more self-sufficient and aligned with the language's modern practices.

Beyond simplifying configuration, this approach makes it easier to maintain and share themes across projects, all without leaving CSS.

not-*: the power of "when not"

Another interesting addition is the new not-* variant, which lets you apply styles when a given condition is not true, bringing even more flexibility to the use of states and pseudo-classes in CSS.

For example:

<button class="not-hover:bg-gray-200 hover:bg-blue-500">Hover over me</button>

In this case, the button shows a gray background when it isn't hovered and changes to blue when the user hovers over it, all with just two classes.

This new variant expands the possibilities for conditional styling and makes the code even more readable, reducing the need for extra CSS rules or manual overrides.

Conclusion

It's clear that Tailwind CSS 4.0 represents an important step in the framework's evolution. The new version aims to get closer and closer to native CSS, making the use of utility classes more intuitive and the configuration process much simpler.

With the elimination of extra files, direct integration with modern tools, and a lighter architecture, Tailwind becomes even more accessible and efficient, especially for those who want to start a project without complications.

The framework now relies on the most modern foundations of CSS, reducing dependencies, improving performance, and enhancing the development experience.

If you'd like to see more of the changes, here's the link to Tailwind's official article about the new version: Tailwind CSS v4.0