Tailwind CSS v4.0 introduces a brand-new compilation engine written completely in Rust, accelerating build loops by up to 10x. Additionally, it transitions from a JavaScript-based configuration file (tailwind.config.js) to a CSS-first approach, where customizations are defined inside your primary stylesheet using standard CSS variables.

This article reviews the major changes in Tailwind CSS v4 and provides a practical migration walkthrough to help you upgrade your projects.

1. Key Changes in Tailwind CSS v4

1) Rust-Powered “Oxide” Engine

The defining feature of v4 is its compiler. Rewritten in Rust, the Oxide engine processes stylesheet files significantly faster than the old PostCSS-based engine. This translates to near-instantaneous dev server startups and hot module replacement (HMR), keeping developers in their flow.

2) CSS-First Configuration

Instead of modifying a tailwind.config.js file, you customize your theme directly in your CSS files using the new @theme directive.

Example Configuration in v4 (CSS Syntax)

@import "tailwindcss";

@theme {
  --color-brand-primary: #3b82f6;
  --color-brand-secondary: #10b981;
  --font-display: "Outfit", sans-serif;
}

The compiler parses these CSS variables and automatically registers the corresponding utility classes—such as bg-brand-primary and font-display—during the build step.

3) Simplified Import Statements

Instead of defining three separate directives (@tailwind base;, @tailwind components;, @tailwind utilities;), you import the package with a single line: @import "tailwindcss";.

2. Practical Migration Steps

Follow these steps to upgrade an existing Tailwind CSS v3 project to v4.

Step 1: Install Dependencies

Run the command to install the updated compiler and PostCSS integration packages:

npm install tailwindcss@next @tailwindcss/postcss@next

Step 2: Migrate Config to CSS

Move custom colors, fonts, or screens defined in your tailwind.config.js into your global stylesheet:

- // tailwind.config.js
- module.exports = {
-   theme: {
-     extend: {
-       colors: {
-         customGray: '#1e293b',
-       }
-     }
-   }
- }

+ /* global.css */
+ @import "tailwindcss";
+ @theme {
+   --color-custom-gray: #1e293b;
+ }

Step 3: Update PostCSS Configuration

Update your project’s postcss.config.js to point to the new Tailwind CSS plugin wrapper:

// postcss.config.js
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

3. Notable New Utility Classes in v4

With the release of v4, several fresh design utilities are supported natively:

• CSS Subgrid Utilities: Standard classes are now included to facilitate grid synchronization (e.g., grid-rows-subgrid and grid-cols-subgrid).
• 3D Transform Directives: Implement 3D rotations, perspective, and depth directly within HTML attributes (e.g., transform-3d, rotate-y-180).
• Container Queries Support: Container queries no longer require external plugins. Developers can use the @container utility to apply styles based on parent dimensions instead of viewport breakpoints.

4. Conclusion: Should You Upgrade?

The build speed improvement alone makes Tailwind CSS v4 an excellent upgrade for most front-end projects. Combining native CSS standards with utility-first classes reduces configuration complexity, offering a cleaner workflow for modern web design.