tailwindcssweb-development

Tailwind CSS v4 — What Changed and Why It Matters

Ishant Singh1 min read

A New Era for Tailwind

Tailwind CSS v4 represents the biggest shift in the framework’s history. Gone is the JavaScript-based tailwind.config.js — everything is now configured directly in your CSS files.

CSS-First Configuration

The @theme directive replaces the old config file:

@import "tailwindcss";

@theme {
  --font-sans: system-ui, sans-serif;
  --color-primary: #000000;
}

This means faster builds, simpler setup, and no context-switching between CSS and JavaScript.

Plugin Loading

Plugins are now loaded via the @plugin directive:

@plugin "@tailwindcss/typography";

No more require() calls in a config file. Everything lives in CSS.

Migration from v3

The migration is straightforward for most projects. The key changes are:

  1. Remove tailwind.config.js
  2. Move theme customizations to @theme in your CSS
  3. Replace require() plugins with @plugin directives
  4. Use @tailwindcss/vite instead of @astrojs/tailwind

Performance Improvements

Tailwind v4 is significantly faster — up to 10x faster in benchmarks. The new engine is built with Rust-powered tooling, making rebuilds nearly instantaneous.

tailwindcssweb-development