How to implement tailwind's CSS class tree shaking

[woodholly]

Hello!
Simple page created with fohn-ui weights 1.5Mb, because includes complete tailwind css.
Tailwind was created for minimal css size and with CSS class tree shaking in mind, but fohn-ui does not shake css.
How could we implement this general feature ?
I think that large external dependencies is what stops atk4-ui from general adoption. I hope fohn-ui can solve this problem.

[ibelar]

@woodholly - Fohn-Ui Tailwindcss include more Tailwind utilities than need in order to support the ability to use PHP for theming purpose. It try to include the most common use utilities in order to support that.
The fohn-ui css build is also only 450k in size, not 1.5 mb.

Beside, you can easily create your own css build and use only what is need for your project instead of fohn-ui css build.
Have a look at Fohn-Ui Css package as an example on how to do so. Or simply look at TailwindCss itself and learn how to create your own css build.

[woodholly]

@ibelar Cool, want if I want to shake css much much deeper ...
I want to shake fohn-ui css, taking into account only used components of fohn-ui and dropping all styles related to unused components.

[ibelar]

@woodholly - You need to create your own css development base using Tailwind configuration.
You can use the fohn-css repository to start with.

In you Tailwind configuration file simply remove 'fohn-ui-default/**/*.txt' from the content property.
This will remove all defaut Fohn-ui css from your css build.