Setup TailwindCSS v4 on Angular 19

TailwindCSS is a powerful utility-first CSS framework that enhances styling efficiency in modern web development. If you’re working with Angular 19 and using SCSS, here’s a step-by-step guide to upgrading and configuring TailwindCSS properly.

Step 1: Upgrade TailwindCSS

Run the following command to upgrade:

npx @tailwindcss/upgrade@next

Step 2: Install TailwindCSS and Required Dependencies

Now, install TailwindCSS and its necessary dependencies using npm. Run:

npm install tailwindcss @tailwindcss/postcss postcss --force

The — force flag ensures that all required dependencies are installed correctly, even if there are existing conflicts.

Step 3: Add PostCSS Configuration

Create a .postcssrc.json file in the root directory of your project and add the following configuration:

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

This file ensures that PostCSS processes TailwindCSS correctly.

Step 4: Create the TailwindCSS Entry File

Inside your src/ directory, create a new file called tailwind.css and add:

@import "tailwindcss";