DEV Community

Nhan Nguyen
Nhan Nguyen

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Step 2: Install TailwindCSS and Required Dependencies

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

npm install tailwindcss @tailwindcss/postcss postcss --force
Enter fullscreen mode Exit fullscreen mode

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": {}
  }
}
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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! 🚀


I hope you found it helpful. Thanks for reading. 🙏
Let's get connected! You can find me on:

Top comments (1)

Collapse
 
fyodorio profile image
Fyodor

Omg, all these words from the title at the same time 🥲 who’d do something like that to their karma 😅