Project Page

tree-shake-css

By Michael Lucht
Keywords: Svelte, CSS, Tailwind
March 16, 2021

Here I will try to collect progress on tree-shake-css.

Tree-shake-css is a new, experimental approach to work with large css files which frameworks like Tailwind or Bootstrap give you.

What tree-shake-css does is it takes a big css file, eg. the full-version from Tailwind, and writes one js & svelte file for every css class. This way you can import the css classes in your code and would not need to purge the css for a production build. And you don't need to tinker on the rollup/webpack configuration.

Due to limitations in tree-shaking with rollup (it seems to think that all svelte files have side-effects?) each class needs to get its own file, which means you need to write more than I was hoping for.

Also, the IDE support is not as great as I was hoping, 20000+ objects seem to be a big deal for typescript. It only offers autocompletion for classes, you already used.

If you have improvement ideas or other feedback, please let me know.

Thanks!

Support me:

or directly

Design & Logo © 2020 Michael Lucht. All rights reserved.