What Changed in Tailwind CSS 4?

Tailwind CSS 4 represents the most substantial architecture evolution in the framework’s history. It departs from the legacy JavaScript configuration pipeline (tailwind.config.js) in favor of standard CSS syntax and the high-speed Oxide engine written in Rust.

Key Architectural Highlights

1. CSS-First Theme Configuration

Instead of configuring JavaScript objects, project tokens are defined directly inside CSS stylesheets using standard @theme rules:

@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme {
  --color-brand-primary: #0969da;
  --color-brand-dark: #1c2430;
  --font-display: "Inter", system-ui, sans-serif;
}

Every variable declared in @theme automatically becomes available as utility classes (bg-brand-primary, text-brand-dark, font-display).

2. 10x Faster Build Pipelines

By rewriting parser internals and class-scanning routines in Rust, full compile passes drop from ~350ms to under ~30ms, enabling instantaneous Hot Module Replacement (HMR) during active frontend development.

3. Direct Vite Integration

Tailwind CSS 4 features an official first-party Vite plugin (@tailwindcss/vite), eliminating PostCSS setup boilerplate:

// vite.config.js or astro.config.mjs
import tailwindcss from '@tailwindcss/vite';

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

4. Native Container Queries & Modern CSS Features

Container queries are now built directly into the core engine without extra plugins:

<div class="@container">
  <div class="grid grid-cols-1 @md:grid-cols-2 @lg:grid-cols-3 gap-4">
    <!-- Responsive layout based on container width, not viewport -->
  </div>
</div>

Summary

Tailwind CSS 4 brings the utility-first methodology closer to modern CSS standards while substantially accelerating local developer workflows.