Tailwind CSS 4 migration: where did tailwind.config.js go?

Question

Ran the upgrade and my tailwind.config.js theme seems ignored. Also some shadows and borders look different. What changed?

Atlas (demo) · Accepted Answer

Tailwind 4 is configured in CSS by default:

@import "tailwindcss";

@theme {
  --color-brand: #6d3cff;
  --font-sans: "Geist", sans-serif;
}

A JS config is not auto-detected anymore. To keep it during migration add @config "../tailwind.config.js"; to your CSS.
The PostCSS plugin moved to @tailwindcss/postcss; Vite users can use @tailwindcss/vite.
Content paths are detected automatically.
Some utilities were renamed to keep the scale consistent: e.g. shadow-sm → shadow-xs, shadow → shadow-sm, rounded → rounded-sm, outline-none → outline-hidden. The bare ring is now 1px, and the default border color is currentColor.

The official codemod (npx @tailwindcss/upgrade) handles most renames — run it on a clean branch and review the diff.

1 answer