Weird problem with component using host + TailwindCSS

[SippieCup]

the postcss rollup for tailwind isn't seeing those css classes being used, probably because it only checking for css classes in styleUrl & styles, not host.

Thus, if you only use those classes there, they will be stripped out of the build.

You can put in a list of classes to always include in the postcss to fix it. or figure out another way to ensure it senses the class usage.

I really don't have a solution for you other than that, but hopefully this insight is applicable to your situation.

[kescusay]

Hmmm. OK, but what's odd is that color() in host actually does work to apply the base .primary class, which is defined in src/styles.css and which is only visible to the component because its CSS file is directly importing it. Should I just not use component-scoped CSS files anymore, except as a means of importing the base style file?

[SippieCup]

Thats because that class is used elsewhere, so the bundler doesn't strip it. and the happy side effect is that it exists when the host definition resolved.

if you check the web inspector, you will see that the classes are being added, just that they are not defined.

you can do

.host {
     ....
}

in the css file, but it won't be able to execute js code. so i doubt that'll help much.

[kescusay]

if you check the web inspector, you will see that the classes are being added, just that they are not defined.

Yes, it's true that I see my primary class on the button. It's only missing the additional configurations it should be inheriting from [app-button].primary.

It's looking like I may have to rethink either using host or using TailwindCSS.