Only include css of components that are being used

[gregg-cbs]

Summary

When doing the following in the tailwind.config.js the general css file size tripples.
content: ['./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'],

It looks like this is including all components css even if components arent being used. This means the browser is downloading the entire flowbite library worth of components tailwindcss without needing it.

It would be nice if we could leverage tailwinds class shedding to only include css of components we use, when we use them.

Motivation

Lighthouse is complaining about unused css. The css file size is 150kbs, naturally its 50kbs. Its not a crushing change but it is something to note that is happening and i hope we can look into it at some point.

[shinokada]

Did you read this?

[gregg-cbs]

Good find and thanks for sharing. I think that information should be part of the setup documentation, i dont think anyone wants extra bloated css?

Also this seems to shed a couple kbs but not as much as I was hoping. I will look into this.