Back to Blog

Tailwind CSS v4: What's New and Exciting

A deep dive into Tailwind CSS v4's new features, including the new engine, improved performance, and developer experience enhancements.

By Jackson Ly
Updated September 4, 2025
2 min read
tailwindcssfrontenddesign systems

Tailwind CSS v4: What's New and Exciting

Tailwind CSS v4 marks a significant milestone in the framework's evolution, introducing a completely rewritten engine and numerous developer experience improvements.

Major Changes

New Oxide Engine

The biggest change is the new Oxide engine written in Rust:

  • 10x faster CSS generation
  • Smaller bundle sizes with better tree shaking
  • Improved watch mode for development

Unified Configuration

No more separate config files! Everything is now in CSS:

@import "tailwindcss";

@theme {
  --color-primary: oklch(0.55 0.2 240);
  --color-secondary: oklch(0.65 0.15 220);
}

Native CSS Features

v4 embraces modern CSS with:

/* Custom variants */
@custom-variant dark (&:is(.dark *));

/* Inline theme values */
@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

Performance Improvements

Build Performance

  • 90% faster initial builds
  • Hot reload under 10ms
  • Memory usage reduced by 40%

Runtime Performance

  • Smaller CSS bundles: Only used styles are included
  • Better caching: Improved browser cache utilization
  • CSS-in-JS compatibility: Better integration with styled components

Developer Experience

Better IntelliSense

Enhanced editor support with:

  • Contextual autocomplete for custom theme values
  • Real-time validation of utility classes
  • Hover previews for color values and spacing

Simplified Setup

Installation is now simpler:

npm install tailwindcss@next

No configuration file needed for basic setups!

Migration Guide

From v3 to v4

Key migration steps:

  1. Update configuration:
/* Old: tailwind.config.js */
module.exports = {
  theme: {
    colors: { primary: '#3b82f6' }
  }
}

/* New: CSS */
@theme {
  --color-primary: #3b82f6;
}
  1. Update imports:
/* Replace this */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* With this */
@import "tailwindcss";

Real-World Benefits

Design System Integration

Perfect for design systems with:

  • CSS custom properties for theming
  • Component variants with @custom-variant
  • Design tokens as CSS variables

Framework Compatibility

Works seamlessly with:

  • Next.js 15: Native PostCSS integration
  • Vite: Lightning-fast development
  • Astro: SSG optimizations

What I Love Most

As someone who's been using Tailwind since v1, these are my favorite v4 features:

  1. Speed: Development builds are noticeably faster
  2. Simplicity: Less configuration, more CSS
  3. Modern CSS: Embracing native CSS features
  4. Theming: CSS custom properties make theming elegant

Conclusion

Tailwind CSS v4 isn't just an incremental update—it's a complete reimagining of how utility-first CSS should work in the modern web development landscape.

The combination of performance improvements, developer experience enhancements, and native CSS integration makes v4 a compelling upgrade for any project.

Are you planning to upgrade to Tailwind CSS v4? What feature excites you the most?