Tailwind CSS v4 Released - 10x Faster with Rust-based New Engine

Tailwind CSS v4 Innovation

Tailwind CSS v4 is a major release that achieves a complete redesign of the framework. By adopting the new “Oxide” engine written in Rust, build performance has dramatically improved.

flowchart LR
    CSS["CSS Input<br/>(@import)"]
    Oxide["Oxide Engine<br/>(Rust)"]
    Lightning["Lightning CSS"]
    Content["Content<br/>Detection"]
    Output["Minified<br/>Output"]

    CSS --> Oxide --> Lightning
    Oxide --> Content
    Lightning --> Output

Performance Comparison:

• v3: 1000ms
• v4: 100ms (10x faster)

Migration to CSS-first Configuration

In v4, configuration has moved from JavaScript config files to CSS-based configuration:

/* v4: CSS-first configuration */
@import "tailwindcss";

@theme {
  /* Custom colors */
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  --color-accent: #f59e0b;

  /* Custom fonts */
  --font-display: "Inter", sans-serif;
  --font-body: "Noto Sans JP", sans-serif;

  /* Custom spacing */
  --spacing-18: 4.5rem;
  --spacing-88: 22rem;

  /* Custom breakpoints */
  --breakpoint-3xl: 1920px;

  /* Custom animations */
  --animate-fade-in: fade-in 0.5s ease-out;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

Migration from v3 Configuration

// v3: tailwind.config.js (old method)
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
      },
      fontFamily: {
        display: ['Inter', 'sans-serif'],
      },
    },
  },
}

// v4: Can be auto-converted to CSS configuration above
// Use npx @tailwindcss/upgrade command for migration

New Feature Highlights

1. Native Container Queries

<!-- Container queries are now standard -->
<div class="@container">
  <div class="@sm:flex @md:grid @lg:grid-cols-3">
    <!-- Layout based on container size -->
    <div class="@sm:w-full @md:w-1/2 @lg:w-auto">
      Content
    </div>
  </div>
</div>

<!-- Named containers -->
<div class="@container/sidebar">
  <div class="@md/sidebar:hidden">
    Sidebar-specific responsive
  </div>
</div>

2. CSS Cascade Layers

/* Tailwind automatically manages layers */
@layer theme, base, components, utilities;

/* Control priority of custom styles */
@layer components {
  .btn-primary {
    @apply bg-primary text-white px-4 py-2 rounded-lg;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

3. 3D Transform Utilities

<!-- 3D transforms are now standard -->
<div class="perspective-1000">
  <div class="rotate-x-45 rotate-y-30 translate-z-20">
    3D transformed content
  </div>
</div>

<!-- preserve-3d maintains 3D positioning of child elements -->
<div class="transform-style-preserve-3d">
  <div class="rotate-y-180 backface-hidden">
    Flip card back
  </div>
</div>

4. New Gradient Syntax

<!-- Multiple color stops -->
<div class="bg-linear-to-r from-blue-500 via-purple-500 via-50% to-pink-500">
  Gradient background
</div>

<!-- Radial gradient -->
<div class="bg-radial from-white to-gray-200">
  Circular gradient
</div>

<!-- Conic gradient -->
<div class="bg-conic from-red-500 via-yellow-500 to-red-500">
  Color wheel style
</div>

Performance Comparison

Large Project (10,000 files) Build Performance:

Lightning CSS Integration

Lightning CSS is integrated by default in v4, enabling the following features:

/* Automatic vendor prefixes */
.element {
  user-select: none; /* Automatically adds -webkit-user-select */
  backdrop-filter: blur(10px); /* Safari support is automatic */
}

/* Automatic conversion of modern CSS syntax */
.container {
  /* Nest syntax is natively supported */
  & .child {
    color: blue;

    &:hover {
      color: red;
    }
  }
}

/* Automatic fallback generation for CSS variables */
.text {
  color: oklch(70% 0.15 250); /* Converts to rgb for unsupported browsers */
}

Zero-Configuration Content Detection

v3 (Manual configuration required):

content: [
  './src/**/*.{js,ts,jsx,tsx}',
  './pages/**/*.{js,ts,jsx,tsx}',
  './components/**/*.{js,ts,jsx}',
]

v4 (Auto-detection):

@import "tailwindcss";
/* No config needed! Auto-scans */

Detected: .html, .js, .jsx, .ts, .tsx, .vue, .svelte, .astro, .mdx etc.

Using the Migration Tool

# Automatic upgrade tool
npx @tailwindcss/upgrade

# What gets migrated:
# 1. tailwind.config.js → CSS @theme conversion
# 2. PostCSS configuration updates
# 3. @apply directive optimization
# 4. Deprecated class replacements

# Vite configuration example
npm install tailwindcss@latest @tailwindcss/vite

// vite.config.ts
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

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

Major Breaking Changes

Future Outlook

Tailwind CSS v4 significantly improves developer experience while maximizing the use of modern CSS features. With the Rust-based engine, comfortable development is possible even in large-scale projects.

Reference Links

• Tailwind CSS v4.0 Official Announcement
• Migration Guide
• Lightning CSS