TechSetupGuides
Beginnertailwindcssfrontend

Tailwind CSS v4: migrating from v3

Tailwind v4 ships a CSS-first config — no more tailwind.config.js by default. Here's what changes.

  1. Step 1

    Install the new PostCSS plugin

    The v3 plugin is replaced by @tailwindcss/postcss.

    npm install -D @tailwindcss/postcss tailwindcss@latest
  2. Step 2

    Replace tailwind.config.js with CSS @theme

    Theme tokens (colors, spacing, fonts) now live inside your CSS file under @theme {}. Most projects can delete tailwind.config.js entirely.

    @import "tailwindcss";

@theme {
  --color-brand: #5865f2;
  --font-display: "Inter", sans-serif;
}
  3. Step 3

    Update PostCSS config

    Use @tailwindcss/postcss in place of tailwindcss + autoprefixer.

    // postcss.config.mjs
export default { plugins: { "@tailwindcss/postcss": {} } };

Feature requests

Sign in to suggest features or vote on existing ones.

No feature requests yet.

Discussion

0 people marked this as worked·Sign in to mark your own.

Sign in to join the discussion.

No comments yet.