TailwindCSS is not working with partial SCSS files.

[mohan9395]

Hi Team,

I have set up a new Angular 19 project with the SCSS preprocessor, using partial SCSS files. Everything has been configured correctly, and the project is working as expected. I then split my SCSS into multiple partial SCSS files, and the style changes worked fine.

However, I am facing an issue after installing TailwindCSS in my Angular project. The changes made in the SCSS but partial files are not being reflected in the styles.

Note: Only TailwindCSS is not working with partial SCSS files.

Example:
file name: _app.scss
body {
@apply text-14 md:text-18 bg-white;
}

Angular v19
TailwindCSS v4.0.7
Node v20

Please provide a solution.

Regards,
Mohanraj

[wongjn]

Tailwind is not really meant to be used with Sass, see https://tailwindcss.com/docs/compatibility#sass-less-and-stylus

[TobyPerplex]

@mohan9395 I struggled with the same issue as you although I use PostCSS (.css files). Fixed it by adding:

@source "./app/components/**/*.component.css";

to my src/styles.css. Hope this helps you!

@philipp-spiess maybe this should be added to the Install Tailwind CSS with Angular documentation?

[mohan9395]

Hi @TobyPerplex,
Thanks for the update, We will check and confirm

[TobyPerplex]

Actually,

@source "./app/components/**/*.component.css";

should be used if your colors are not working. Which is not your problem. To fix your problem I think you need to use @reference: https://tailwindcss.com/docs/functions-and-directives#reference-directive