See Full Picture

Tailwind CSS v4.0 brings significant improvements across performance, developer experience, and features. Here's everything you should know:

Rewritten in Rust

• Tailwind now uses a Rust-based engine for compiling styles.
• Build speeds improved dramatically:
  • Full builds: ~5x faster
  • Incremental builds: ~100x faster
• Much more scalable for large codebases.

CSS-First Configuration

New @theme directive allows design tokens directly in CSS:

@theme {
  --color-primary: #4f46e5;
  --spacing-base: 1rem;
}
    

Reduces dependence on tailwind.config.js.

Zero-Config Content Detection

No more manually specifying content paths in config:

// tailwind.config.js no longer needs this
content: ["./src/**/*.{js,ts,jsx,tsx}"],
    

It scans intelligently based on files tracked in Git and package.json.

OKLCH Color Support

Tailwind v4 supports the OKLCH color space, a modern alternative to RGB/HSL:

color: oklch(75% 0.2 250);

Native Container Queries

Use utilities like container-[size] to respond to element/container size:

<div class="container">
  <div class="container-[md]:bg-blue-500">
    Responsive to container width!
  </div>
</div>
    

Native 3D Transforms

New utilities for 3D styling:

<div class="rotate-x-12 translate-z-8">Cool 3D effect!</div>

Composable Variants

Compose variants like never before:

<div class="group-has-[data-active]:opacity-100">
  Appears when parent group is active
</div>
    

Official Vite Plugin

Out-of-the-box support for Vite:

npm install -D @tailwindcss/vite

Updated Defaults

• Border color now defaults to currentColor instead of gray-200.
• Ring width is now 1px instead of 3px.

Removed/Deprecated Features

• Removed utilities:
  • text-opacity-*
  • flex-grow-*, flex-shrink-*
• Reason: modern CSS covers these more efficiently.

Other Notables

New @starting-style support for CSS transitions:

@starting-style {
  opacity: 0;
}
    

Should You Upgrade?

If you want faster builds, better CSS alignment, and modern capabilities like container queries and OKLCH colors, Tailwind v4.0 is a huge win. The upgrade process is relatively smooth, with a detailed upgrade guide from the Tailwind team.