Tailwind CSS v4.0 New Features - 10x Performance

Tailwind CSS v4.0 Released

Tailwind CSS v4.0 was released in early 2025. With a completely new internal architecture, build speed is up to 10x faster. CSS variable-based configuration enables more flexible customization.

Note: v4.0 includes breaking changes, but an automatic migration tool is provided. Migration of existing projects can be done relatively smoothly.

Major Changes

1. Oxide Engine - Rust-based New Architecture

Migration from PostCSS plugin to a new engine written in Rust. This achieves significant performance improvements.

Lightning CSS is used internally to process vendor prefixes, syntax transformation, and compression at high speed.

2. CSS-first Configuration

tailwind.config.js is no longer required. You can configure directly in CSS files.

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

/* Theme customization */
@theme {
  --color-primary: #3b82f6;
  --color-secondary: #64748b;
  --font-sans: "Inter", sans-serif;
  --breakpoint-3xl: 1920px;
}

/* Custom utilities */
@utility scroll-snap-x {
  scroll-snap-type: x mandatory;
}

3. Theme with CSS Variables

All design tokens are output as CSS variables. Themes can be changed dynamically without JavaScript.

/* CSS variables generated by Tailwind */
:root {
  --color-blue-500: #3b82f6;
  --spacing-4: 1rem;
  --font-size-lg: 1.125rem;
}

/* Dynamically change theme with JavaScript */
document.documentElement.style.setProperty('--color-primary', '#ef4444');

4. New Utilities

Many new utility classes have been added.

<!-- Container Queries -->
<div class="@container">
  <div class="@lg:flex @lg:gap-4">
    Styles based on container size
  </div>
</div>

<!-- Subgrid -->
<div class="grid grid-cols-3">
  <div class="col-span-2 grid grid-cols-subgrid">
    Inherits parent grid tracks
  </div>
</div>

<!-- text-wrap -->
<h1 class="text-balance">Balanced line breaks</h1>
<p class="text-pretty">Prettier line breaks</p>

<!-- 3D Transforms -->
<div class="rotate-x-45 rotate-y-12 perspective-500">
  3D transform
</div>

5. Automatic Content Detection

content configuration is no longer required. Files in the project are automatically detected.

/* v3.x - Manual configuration was required */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './public/index.html'
  ]
}

/* v4.0 - Auto-detection (no configuration needed) */
/* Automatically scans files not in gitignore */

Migration Guide

Automatic Migration

# Automatic upgrade tool
npx @tailwindcss/upgrade

Major Changes

Removed Utilities

• *-opacity-* - Unified to slash notation
• flex-grow - Unified to grow
• flex-shrink - Unified to shrink
• overflow-ellipsis - Unified to text-ellipsis

New Installation Method

Vite Projects

# Installation
npm install tailwindcss@next @tailwindcss/vite

// vite.config.js
import tailwindcss from '@tailwindcss/vite'

export default {
  plugins: [tailwindcss()]
}

/* CSS */
@import "tailwindcss";

Summary

Tailwind CSS v4.0 has significantly evolved in both performance and DX. Key points:

• 10x Faster: Rust-based new engine
• CSS-first: No config file needed, everything in CSS
• CSS Variables: Easy dynamic theme changes
• New Utilities: Container Queries, Subgrid, and more

There is a migration cost, but it can be done relatively smoothly with the automatic migration tool. Use v4.0 for new projects, and plan gradual migration for existing projects.