[v4] Angular css modules not working

[FlavioSantoro92]

I followed the guide to create a new Angular app and install TW4, and it works.
After that I created a new component, and if I use come utility class in the html file it still works, but if I use the @apply directive in the css file with any of the utility classes I get compilarion error:

In that css file I have to use @import ad choose the style.css file. But importing in each needed css file the main css file means all the classes already defined in that file will be duplicated in the bundle:

As suggested from @wongjn I should use @reference directive (in the doc there are Vite and Svelte mentioned, so previously I skipped that part), but actually now I have a weird behavior:

It seems that the css variables are unset, but if I add a random class, for example text-amber-500 all the styles are as they should be:

after that, if I remove the previously added class it still works until I reload the page. I tried even put the styles.css path in the @reference but nothing changed.

The project was created from scratch following the guide, on macos 14.7.2, node 22.13.1 and npm 10.9.2.
In the IDE (Intellij Ultimate) I have that error on the directive, probably a bug in the intellisense plugin cause it won't recognize the directive at all.

[philipp-spiess]

Hey! Where are you defining --color-red to be --color-red-400? It seems that you are extending the custom Tailwind CSS config but inside the CSS module you only reference the default Tailwind CSS them, so your custom theme keys are not added. If you have a file that does @theme to define --color-red, that file should be used with @reference too. 👍