Tailwind CSS 4.0: What Changed and How to Migrate

By /

Tailwind CSS 4.0: What Changed and How to Migrate

Tailwind CSS 4.0 is a ground-up rewrite. The JavaScript config file is gone, replaced by CSS-native configuration. The new engine is 10x faster and the output is smaller.

CSS-First Configuration

@import "tailwindcss";

@theme {
  --color-primary: #0B1121;
  --color-accent: #22d3ee;
  --font-mono: "JetBrains Mono", monospace;
  --font-sans: "Inter", sans-serif;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
}

No more tailwind.config.js. Everything is CSS custom properties that your IDE understands natively.

Container Queries Built-In

Responsive design based on container size instead of viewport. Cards that adapt whether they are in a sidebar or full-width layout — no JavaScript needed.

Migration Steps

–

Install Tailwind 4: npm install tailwindcss@4

–

Convert config to CSS @theme block

–

Replace deprecated utilities (check migration guide)

–

Remove PostCSS config (Tailwind 4 has its own bundler)

The migration is mostly mechanical. Run the official codemod, fix any custom plugin incompatibilities, and you are done.

Scroll to Top