Tailwind CSS 4 — What's New?

Tailwind CSS 4 represents the most significant update in the framework's history. The Tailwind Labs team completely rewrote the engine, introduced native CSS variable support, and simplified configuration. Let's explore what has changed and how it will impact your development workflow.

New Oxide Engine Built with Rust

The main change in Tailwind CSS 4 is a complete rewrite of the framework's core. The new Oxide engine, written in Rust, delivers incredible performance improvements:

• Up to 5× faster CSS compilation
• Instant rebuilds in development mode (often < 10ms)
• Lower memory consumption when working with large projects

The move to Rust not only accelerated performance but also laid the foundation for future capabilities that would have been impossible with a JavaScript-based engine.

Configuration via CSS

One of the most revolutionary changes is moving away from JavaScript configuration in favor of native CSS. Instead of tailwind.config.js, you now configure the framework directly in your CSS file:

Before (Tailwind v3):

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: "#7e102e",
      },
      spacing: {
        128: "32rem",
      },
    },
  },
};

Now (Tailwind v4):

@import "tailwindcss";
 
@theme {
  --color-brand: #7e102e;
  --spacing-128: 32rem;
  --font-sans: Inter, system-ui, sans-serif;
}

Benefits of the new approach:

• Fewer files — everything in one place
• Native CSS — works with any tooling
• Better for performance — no need to parse JavaScript
• Easier for beginners — familiar CSS syntax

Native CSS Variables

Tailwind 4 generates real CSS variables instead of static values. This unlocks numerous possibilities:

/* Tailwind 4 generates */
.bg-brand {
  background-color: var(--color-brand);
}
 
.text-brand {
  color: var(--color-brand);
}

Dynamic Themes Out of the Box

Theme switching has become trivial:

@theme {
  --color-primary: #3b82f6;
  --color-background: white;
}
 
@media (prefers-color-scheme: dark) {
  @theme {
    --color-primary: #60a5fa;
    --color-background: #1a1a1a;
  }
}
 
/* Or via data attributes */
[data-theme="dark"] {
  @theme {
    --color-primary: #60a5fa;
    --color-background: #1a1a1a;
  }
}

Dynamic Runtime Values

CSS variables allow you to change styles dynamically via JavaScript:

// Change brand color on the fly
document.documentElement.style.setProperty("--color-brand", "#ff0000");

Simplified Project Structure

Tailwind 4 significantly simplified project initialization:

# Installation
npm install tailwindcss@next
 
# All you need in CSS
@import "tailwindcss";
 
@theme {
  /* Your settings */
}

No longer needed:

• ✅ postcss.config.js (built-in support)
• ✅ tailwind.config.js (configuration in CSS)
• ✅ Separate plugins for basic features

Utility Improvements

Automatic Container Queries

Built-in container query support without plugins:

<div class="@container">
  <div class="@md:text-lg @lg:text-xl">
    Font size depends on container size, not viewport
  </div>
</div>

New Color Functions

Support for modern CSS functions:

@theme {
  --color-primary: oklch(0.5 0.2 250);
  --color-accent: color-mix(in oklch, var(--color-primary) 80%, white);
}

<div class="bg-primary/50">
  <!-- Transparency works with any color space -->
</div>

Enhanced Gradients

More intuitive gradient syntax:

<div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">
  Beautiful gradient
</div>

Migrating from Tailwind 3

Tailwind Labs provides an automated migration tool:

npx @tailwindcss/upgrade

Key changes during migration:

1. Configuration Update

// Old tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "#7e102e",
      },
    },
  },
};

Becomes:

/* styles/globals.css */
@theme {
  --color-primary: #7e102e;
}

2. Syntax Changes

Some utilities have been renamed for better consistency:

• flex-shrink-0 → shrink-0
• flex-grow → grow
• decoration-clone → box-decoration-clone

3. Removed Classes

Some rarely used utilities have been removed:

<!-- Was -->
<div class="blur-sm filter">...</div>
 
<!-- Now -->
<div class="blur-sm">...</div>

Performance in Practice

Real metrics from production projects:

Ecosystem Compatibility

Tailwind 4 works with popular frameworks:

Next.js

// next.config.js
module.exports = {
  experimental: {
    optimizeCss: true, // Uses Oxide
  },
};

Vite

// vite.config.js
import tailwindcss from "@tailwindcss/vite";
 
export default {
  plugins: [tailwindcss()],
};

Astro, Remix, SvelteKit

Built-in support via PostCSS or native plugins for each framework.

What This Means for Your Projects

Benefits of upgrading to v4:

1. Significant development speed boost due to instant rebuilds
2. Simplified setup without needing to understand JavaScript configs
3. Native themes work faster and are easier to maintain
4. Fewer dependencies — many plugins are now built-in
5. Future of the framework — Oxide enables features impossible with JS

When to migrate:

• ✅ New projects — start with v4 immediately
• ✅ Active development — migration will pay off through speed gains
• ⚠️ Legacy projects — consider waiting for stable release
• ⚠️ Complex custom plugins — check compatibility

Conclusion

Tailwind CSS 4 is not just an update, but a reimagining of how a utility-first framework should work. The move to Rust, native CSS variables, and simplified configuration make it faster, simpler, and more powerful.

Key takeaways:

• Oxide engine delivers unprecedented speed
• CSS configuration is simpler and more natural
• CSS variables unlock new theming possibilities
• Migration from v3 is automated and painless
• Performance improved by orders of magnitude

If you're using Tailwind in your projects, v4 deserves your attention. Start with a new pet project to evaluate all the benefits, then plan migration of your main applications.

Using Tailwind in your projects? Share your v4 migration experience or ask questions — contact me.