What's new in Tailwind CSS v4

The essence of this new version allows to facilitate installation but also the customization of Tailwind CSS.

Improved Performance

For example, we can see on the official Tailwind CSS website this table that represents the enormous performance increase when working with the CSS framework:

Simplified Customization (css-first)

With versions prior to Tailwind CSS 4 we had to use the tailwind.config.js file to customize our classes.

module.exports = {
  theme: {
    extend: {},
  },
  plugins: [],
};

Now, that's a thing of the past!

Tailwind CSS 4 can be managed in your default stylesheet with a single import.

@import "tailwindcss";

@theme {
  --font-display: "Roboto", "sans-serif";

  --breakpoint-3xl: 1920px;

  --color-primary-100: oklch(0.99 0 0);
  --color-primary-200: oklch(0.98 0.04 113.22);
  --color-primary-300: oklch(0.94 0.11 115.03);
  --color-primary-400: oklch(0.92 0.19 114.08);
  --color-primary-500: oklch(0.84 0.18 117.33);
  --color-primary-600: oklch(0.53 0.12 118.34);

  /* ... */
}

It's simpler. Everything is in our stylesheet (that's why we talk about a css-first concept here).

Advanced Features

Tailwind CSS 4 doesn't just optimize performance but also supports the latest CSS features supported by browsers.

For example, the new color-mix property is now usable by Tailwind CSS classes:

@layer theme, base, components, utilities;

@layer utilities {
  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }
  .bg-blue-500\/50 {
    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
  }
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

We also notice that Tailwind CSS v4 now decomposes its utility classes and components with very different rules:

• @layer utilities / @utility - to define a utility class;
• @layer component - to define a component (.btn for example);
• @variant - to define a variant;
• @property - to define a variable.

From now on, you'll need to use this to activate dark mode when a dark class exists on an element:

@custom-variant dark (&:where(.dark, .dark *));

New Colors with OKLCH

Tailwind CSS v4 now uses a new approach to manage colors in its color palette by using OKLCH.

Although little used compared to its RGB alternative, it allows for more modern/precise colorimetry.

Simplified Installation

Tailwind CSS v4.0 is now simpler to install: a single line is enough to load utility classes in our stylesheet:

@import "tailwindcss";

Automated Content Detection

Now, no need to specify the files that contain our Tailwind CSS utility classes.

Everything is done for us!

These folders are for example ignored from now on if they are added to your .gitignore file because Tailwind CSS v4 reads it automatically:

/node_modules
/coverage
/.next/
/build

Improvements to Arbitrary Values

With Tailwind CSS v4 we can now use on-the-fly classes:

<div class="grid grid-cols-15">
  <!-- ... -->
</div>

This code generates a 15-column grid while Tailwind CSS v4 only has a grid up to 12 columns by default. We could have specified grid-cols-300 and it would have generated a grid with 300 columns in one go.

Container Query Integration

Container queries are now supported by Tailwind CSS v4:

<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">
    <!-- ... -->
  </div>
</div>

Improved 3D Transformation

Tailwind CSS v4.0 now supports classes that allow the use of three-dimensional transformations.

For example, we now have rotate-x-*, rotate-y-* and scale-z-*.

Don't hesitate to check the documentation to properly use this new possibility with Tailwind CSS v4.0.

Conclusion

In short! Here are the new features of Tailwind CSS v4!

Want to upgrade to version 4? A single command is enough:

npx @tailwindcss/upgrade@next

Want to get trained? Our dedicated Tailwind CSS 4 training is already available to guide you and make you a true front-end expert.