Angular utility class in component's css

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

What's the correct way to use TW4 in Angular?

[wongjn]

You probably need to use the @reference directive.

---

As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097

[FlavioSantoro92]

Should I create as issue for the plugin?
And even the docs should be modified, because now that directive seems related only to Vue or Svelte

[wongjn]

What plugin are you refering to?

[FlavioSantoro92]

This one:
https://plugins.jetbrains.com/plugin/15321-tailwind-css
Version 243.23654.189

[FlavioSantoro92]

@wongjn I thought it worked, but actually I have a weird behavior:

This is the situation when I started the project, 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.

[FlavioSantoro92]

Closed here #16279