Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

[v4] Angular css modules not working #16255

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
FlavioSantoro92 opened this issue Feb 4, 2025 · 1 comment
Closed

[v4] Angular css modules not working #16255

FlavioSantoro92 opened this issue Feb 4, 2025 · 1 comment

Comments

@FlavioSantoro92
Copy link

FlavioSantoro92 commented Feb 4, 2025

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:
image

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:
image

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:

Image

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:

Image

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
Copy link
Member

philipp-spiess commented Feb 5, 2025

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. 👍

@tailwindlabs tailwindlabs locked and limited conversation to collaborators Feb 5, 2025
@philipp-spiess philipp-spiess converted this issue into discussion #16279 Feb 5, 2025

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants