Help with unused CSS messages

[MrAmericanMike]

So first I posted this on vite-plugin-svelte Repo thinking maybe this was an issue, but they are just the messenger in this case.

I'm having issues when using PostCSS and @apply instead of writing the classes on the html itself.

I'm going down the line, so sorry if this isn't a Skeleton issue neither and it goes back to TailwindCSS (I would guess is the next "suspect")

The console output looks like this:

[vite-plugin-svelte] ___/src/routes/+page.svelte:29:0 Unused CSS selector ".button > :not([hidden]) ~ :not([hidden])"

I made a SvelteLab project to illustrate this issue. https://www.sveltelab.dev/2h5pdcohp85tvd4?files=.%2Fsrc%2Froutes%2F%2Bpage.svelte

When I create the button like this:

<button class="btn variant-filled-primary">BUTTON 1</button>

Everything seams fine, but as soon as I go this route:

<button class="button">BUTTON 2</button>

<style lang="postcss">
	.button{
		@apply btn variant-filled-primary
	}
</style>

Console shows the error mentioned above.

[endigo9740]

I'm having issues when using PostCSS and @apply instead of writing the classes on the html itself.

Just so we're on the same page here, this is considered and anti-pattern of Tailwind. Utility classes are meant to be inserted directly into your template, even if you don't find it as compact or pretty as you might want. This is how they are designed to work. Abstracting with @apply is a practice that even Tailwind themselves discourage:

https://tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction

The other issue you might running into here is that doing this in a <style> tag within a route/component doesn't always work as you might expect. Scope is isolated when it comes to PostCSS between your global stylesheet and each instance of <style>. And again, this is an abstraction that's introducing more code than doing this the intended way:

<button class="btn variant-filled-primary">BUTTON 2</button>

Rather than trying to go down a rabbit hole and trying to force a square peg into a round hole here, my suggestion would just be to use utility classes as they are intended - directly in the template. If you're fighting this, then you're fighting Tailwind, and you're losing one of the main benefits (small bundle sizes).

[MrAmericanMike]

Thanks a lot, wasn't aware of the implications on using the @apply and I totally understand it now that you mention it that in Svelte the styles been scoped makes things even worst in this case.