search

themesberg / flowbite-svelte

Official Svelte components built for Flowbite and Tailwind CSS
https://flowbite-svelte.com
MIT License
2k stars 239 forks source link

Only include css of components that are being used #1361

Closed gregg-cbs closed 6 hours ago

gregg-cbs commented 3 weeks ago

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 commented 3 weeks ago

Did you read this?

gregg-cbs commented 3 weeks ago

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.

shinokada commented 6 hours ago

I will close the issue for now. Please feel free to open a new issue.