Tailwind CSS classes not applied after upgrading to v4

Question

After upgrading Tailwind to v4, most of my styles are gone. My `tailwind.config.js` still lists `content` paths. What changed?

Accepted Answer

Tailwind v4 changed the setup. Configuration moved into CSS, and content detection is automatic.

1. Replace the old `@tailwind base; @tailwind components; @tailwind utilities;` with a single import:

```css
@import "tailwindcss";
```

2. Move theme customizations into CSS:

```css
@theme {
  --color-brand: #00209f;
  --font-display: "Inter", sans-serif;
}
```

3. The PostCSS plugin is now `@tailwindcss/postcss` (or use `@tailwindcss/vite`).

4. To keep an existing JS config during migration, reference it with `@config "./tailwind.config.js";`.

Run `npx @tailwindcss/upgrade` in a clean git branch. It automates most of this, including renamed utilities.

1 réponse