How to upgrade TailwindCSS?

Question

I'm currently using Tailwind v3 in my Angular project (https://github.com/edissyum/opencapture/tree/dev_nch).

Today I tried to upgrade to Tailwind v4, but without success.

I didn't use PostCSS, I just have Tailwind in my package.json, my tailwind.config.js and the @tailwind base import in my main scss file.

If I upgrade the package to 4.0.0, I have the following error:

Error: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

I try to install @tailwind/postcss and create a PostCSS config file like this:

export default {
  plugins: {
    "@tailwindcss/postcss": {}
  }
}

Answer 1

Removed @tailwind directives

In v4 you import Tailwind using a regular CSS @import statement, not using the @tailwind directives you used in v3:

Not supported from v4

@tailwind base;
@tailwind components;
@tailwind utilities;

Supported from v4

@import "tailwindcss";

• Upgrade guide - TalwindCSS v3 to v4
• Problem with "npx tailwindcss init -p" command - StackOverflow - related to v4 upgrade
• Unable to upgrade Tailwind CSS v3 to v4 - StackOverflow - related to v4 upgrade
• How to setting Tailwind CSS v4 global class? - StackOverflow - related to v4 upgrade
• Change TailwindCSS default theme with Vite - StackOverflow - related to v4 upgrade