Tailwind CSS v4.0: Major Updates!

tailwindcss 4.0

Introduction

Holy shit, tailwind 4.0 is here.

It is an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience

Key Highlights

1. High-Performance Engine

The core of Tailwind CSS has been completely rewritten, delivering remarkable performance improvements:

Full builds are up to 5x faster
Incremental builds are over 100x faster
Build times measured in microseconds

Performance Benchmark:

Full build: 378ms → 100ms (3.78x improvement)
Incremental rebuild: 44ms → 5ms (8.8x improvement)

2. Modern Web Platform Integration

Tailwind CSS v4.0 leverages cutting-edge CSS features:

@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);
  }
}

Key technologies:

Native cascade layers
Registered custom properties
color-mix() function
Logical properties

3. Simplified Installation

Installation is now a breeze:

# Install Tailwind
npm i tailwindcss @tailwindcss/postcss
 
# Import in CSS
@import "tailwindcss";

4. CSS-First Configuration

Configure directly in your CSS:

@import "tailwindcss";
@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-500: oklch(0.84 0.18 117.33);
}

5. Exciting New Features

Container Queries

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

3D Transforms

<div class="perspective-distant">
  <article class="rotate-x-51 rotate-z-43 transform-3d">
    <!-- 3D transformed element -->
  </article>
</div>

Gradient Improvements

<!-- Linear gradient with angle -->
<div class="bg-linear-45 from-indigo-500 via-purple-500 to-pink-500"></div>
 
<!-- Conic and radial gradients -->
<div class="size-24 rounded-full bg-conic/[in_hsl_longer_hue] from-red-600 to-red-600"></div>

6. Additional Utilities

New features include:

Inset shadow utilities
Field sizing controls
Color scheme utilities
Improved data attribute targeting
Container query support

Conclusion

Tailwind CSS v4.0 is not just an update—it's a revolutionary approach to web styling, combining performance, flexibility, and modern web technologies.

Ready to upgrade? Check out the official Tailwind CSS v4.0 documentation

Tailwind CSS 4.0 - New changes