@apply is not working in angular 20/ tailwind 4 project

I've recently created a new angular application (version 20.3.0) and I installed tailwind 4, using the angular documentation guideline which is very simple to do (also tailwindcss in its documentation has exactly the same guideline to integrate with Angular).

So briefly the guideline says:

1. 
   npm install tailwindcss @tailwindcss/postcss postcss
   
   
2. 
   create .postcssrc.json file containing:
   
   { "plugins": { "@tailwindcss/postcss": {} } }
   
   
3. 
   add this to styles.scss: @use "tailwindcss";
   

So, then I've tried using tailwindcss classes in the components templates and it works perfectly, but when I start adding tailwindcss classes into scss files using @apply, I've noticed that it's only working in the styles.scss file, and not working for the components style files which are scss files too.

.my-class { @apply bg-red-500; }


So, when I add @apply inside any component style file, I get this compilation error:

Error: Cannot apply unknown utility class `bg-red-400`. Are you using CSS modules or similar and missing `@reference`? https://tailwindcss.com/docs/functions-and-directives#reference-directive

Continue reading...