How to upgrade TailwindCSS from v3 to v4 on Angular 19 with SCSS

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"; This file serves as the main entry point for TailwindCSS styles. Step 5: Update Your Global Styles File Modify your global src/styles.scss file to include TailwindCSS by adding: @use "./tailwind"; This ensures that SCSS processes TailwindCSS correctly and integrates it into your Angular project. Step 6: Fix Tailwind IntelliSense in VS Code If you are using the TailwindCSS IntelliSense extension in VS Code, and it’s not auto-completing class names, following this setup can help resolve the issue. Adding Tailwind through @use in SCSS rather than @import aligns better with Angular's SCSS handling. Final Thoughts Following these steps, you can successfully upgrade TailwindCSS in your Angular 19 project while maintaining SCSS styling. This approach not only improves maintainability but also ensures smooth integration with Angular’s SCSS-based architecture. Happy coding!

Feb 19, 2025 - 16:41

How to upgrade TailwindCSS from v3 to v4 on Angular 19 with SCSS

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";

This file serves as the main entry point for TailwindCSS styles.

Step 5: Update Your Global Styles File

Modify your global src/styles.scss file to include TailwindCSS by adding:

@use "./tailwind";

This ensures that SCSS processes TailwindCSS correctly and integrates it into your Angular project.

Step 6: Fix Tailwind IntelliSense in VS Code

If you are using the TailwindCSS IntelliSense extension in VS Code, and it’s not auto-completing class names, following this setup can help resolve the issue.

Adding Tailwind through @use in SCSS rather than @import aligns better with Angular's SCSS handling.

Final Thoughts

Following these steps, you can successfully upgrade TailwindCSS in your Angular 19 project while maintaining SCSS styling. This approach not only improves maintainability but also ensures smooth integration with Angular’s SCSS-based architecture.

Happy coding!