This content originally appeared on DEV Community and was authored by Nhan Nguyen
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! 🚀
I hope you found it helpful. Thanks for reading. 🙏
Let's get connected! You can find me on:
- Medium: https://medium.com/@nhannguyendevjs/
- Dev: https://dev.to/nhannguyendevjs/
- Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
- X (formerly Twitter): https://twitter.com/nhannguyendevjs/
- Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs
This content originally appeared on DEV Community and was authored by Nhan Nguyen
Nhan Nguyen | Sciencx (2025-02-19T15:17:33+00:00) How to upgrade TailwindCSS from v3 to v4 on Angular 19 with SCSS. Retrieved from https://www.scien.cx/2025/02/19/how-to-upgrade-tailwindcss-from-v3-to-v4-on-angular-19-with-scss/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.