Tailwind CSS v4: CSS-First Configuration

csstailwindwebdev

Tailwind CSS v4 is a significant rewrite. The most visible change is that configuration moves from tailwind.config.js into your CSS file directly.

The new CSS-first approach

Instead of a JavaScript config file, you configure Tailwind in your global CSS:

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

@theme {
  --color-brand: oklch(55% 0.2 250);
  --font-sans: "Inter", sans-serif;
}

The @theme block replaces the theme key in the old config. Custom colors, fonts, and spacing all live here.

What stayed the same

Utility class names are largely unchanged. If your markup used text-gray-900 or flex items-center before, it still works.

What changed

  • No more tailwind.config.js
  • Plugins are loaded with @plugin instead of the plugins array
  • Content paths are auto-detected — no more content: ['./src/**/*.{ts,tsx}']

Migrating

If you're upgrading an existing project, the Tailwind docs have an upgrade guide that covers the automated codemod.

For new projects, just use @import "tailwindcss" and you're good to go.