Tailwind CSS 4.0 - 10x Faster with Rust-based Engine

Tailwind CSS 4.0 Overview

Tailwind CSS 4.0 adopts the new Rust-based “Oxide” engine, significantly improving build speed. The configuration method has changed to CSS-first, making it more intuitive.

Oxide Engine

Impressive Performance

Build Speed Comparison:
- Tailwind 3.x: 500ms
- Tailwind 4.0: 50ms (10x faster)

Incremental build in watch mode:
- Tailwind 3.x: 100ms
- Tailwind 4.0: 5ms (20x faster)

CSS-First Configuration

Instead of the traditional tailwind.config.js, configure directly in CSS.

/* app.css */
@import "tailwindcss";

@theme {
  /* Color palette */
  --color-primary: #3b82f6;
  --color-secondary: #10b981;

  /* Fonts */
  --font-sans: "Inter", sans-serif;

  /* Spacing */
  --spacing-18: 4.5rem;

  /* Breakpoints */
  --breakpoint-3xl: 1920px;
}

Migration from Traditional Configuration

// tailwind.config.js (traditional)
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6'
      }
    }
  }
};

// app.css (Tailwind 4.0)
@theme {
  --color-primary: #3b82f6;
}

New Utility Classes

Container Queries

<div class="@container">
  <div class="@sm:flex @lg:grid @lg:grid-cols-3">
    <!-- Layout changes based on container size -->
  </div>
</div>

3D Transforms

<div class="perspective-1000">
  <div class="rotate-x-45 rotate-y-30 translate-z-20">
    3D transformed element
  </div>
</div>

Improved Gradients

<div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500
            via-30%">
  Fine-grained gradient position control
</div>

CSS Custom Properties

@theme {
  --color-brand: oklch(65% 0.2 250);
  --color-brand-light: oklch(from var(--color-brand) calc(l + 20%) c h);
  --color-brand-dark: oklch(from var(--color-brand) calc(l - 20%) c h);
}

<button class="bg-brand hover:bg-brand-dark text-white">
  Brand color button
</button>

Installation and Setup

npm install tailwindcss@next @tailwindcss/vite

// vite.config.ts
import tailwindcss from '@tailwindcss/vite';

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

/* app.css */
@import "tailwindcss";

Migration Points

Summary

Tailwind CSS 4.0 improves development experience with the Rust-based engine for significant speed improvements and CSS-first configuration. You can develop large-scale projects without worrying about build times.