How to use global styles?
www-chique opened this issue · 2 comments
First of all, many thanks for WindiCSS! It's absolutely amazing. Especially the variant grouping, speed, and developer experience is top notch! I'm glad I found out about WindiCSS. It's so much better in terms of everything.
However, I am facing this particular problem...
In my setup, in App.svelte, I have the following:
<style global>
@layer base {
body {
@apply text-sm;
}
}
@layer components {
.wonderful {
@apply text-blue-500;
}
}
</style>
However, these styles are not being applied. In every other svelte component where the styles have a class which exists inside the HTML of that component, it works. But because in the App.svelte I have those classes which doesn't exist in the HTML (because those are global classes, which I use from other components) it's being marked as "unused" and not generated.
I am a newbie at this.
Any help is much appreciated. Thanks.
it should work as you marked it with following syntax, I am more than happy to help, please give some more insight about your setup, you could also join our discord to ask others for help
<style global>
</style>
After a little bit of digging, it looks like the issue is not related to WindiCSS, but most probably postcss.
Many thanks for your quick reply.