IM

ISSA MDOE

Full Stack Software Engineer

Loading0%
2025-11-05 8 min read

Why I moved from Tailwind to... Tailwind v4

#Frontend#CSS#DevOps
👨🏽‍💻
Issa Ally Mdoe
Full Stack Engineer

Tailwind CSS v4 is arguably the biggest update since the framework's inception. It's not just a version bump; it is a complete rewrite of the engine. Here is my experience migrating a large Next.js production app to Tailwind v4, and why you should consider it too.

The Problem with v3

  1. Build Performance: On massive projects, the JIT engine still takes a measurable amount of time to scan files.
  2. Configuration: The tailwind.config.js file can get bloated with heavy customization.
  3. JavaScript Dependency: You rely heavily on the Node.js ecosystem for the build process.

Enter Tailwind v4 (Oxide Engine)

Tailwind v4 introduces a new engine named Oxide, written in Rust. It is designed for speed—unified, single-pass compilation that is orders of magnitude faster.

Key Features

  1. Zero-Configuration: It detects your content files automatically. No more content: ["./src/**/*.{ts,tsx}"].
  2. CSS-First Configuration: Instead of a JS config file, you configure variables directly in CSS.
css
/* main.css */
@import "tailwindcss";

@theme { --font-display: "Satoshi", "sans-serif"; --color-neon-blue: oklch(51.01% 0.274 263.83); --spacing-128: 32rem; } `

  1. OKLCH Colors: Native support for the wide-gamut OKLCH color space, allowing for more vibrant and accessible color palettes.

The Migration Process

Migrating was surprisingly smooth, but there were "gotchas".

Step 1: Install the Beta

bash
npm install tailwindcss@next @tailwindcss/vite@next

Step 2: Update Config

We deleted our 200-line tailwind.config.js and moved our custom design tokens into the CSS @theme block. This felt incredibly simplifying.

Step 3: Handling Plugins

Official plugins like @tailwindcss/typography and @tailwindcss/forms are now native or easily importable via CSS:

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

Performance Wins

The build times for our dashboard went from 8.5s to 1.2s. HMR (Hot Module Replacement) feels instantaneous.

Conclusion

Tailwind v4 represents the maturing of utility-first CSS. By moving configuration back to CSS and leveraging Rust for the heavy lifting, it feels like a native web platform tool rather than a JavaScript build artifact. If you value DX and build speed, upgrade immediately.


Enjoyed this article?
Share it with your network