[Question/Discussion] Tree shaking methods

[OwenMelbz]

The Scenario/Question

With javascript we have the benefit of being able to detect what methods/functions are used and removing them from our final output.

With writing your own css you have the benefit of only writing what you need.

With using a css library/framework you do not have the benefit of including only whats needed.

You might only ever use 20% of the framework (in this case tailwind)

Does anybody have any suggestions or methods to replicate the tree-shaking affect to reduce unused css?

---

One quick thought I had was to basically only include tailwind in your project and use exclusively the @apply

So when writing your css you do like

.sm\:text-right { @apply .text-right }

Yes it means basically means creating a subset of tailwind - but from initial thoughts, is the only thing i can think of?

[adamwathan]

purifycss is one tool for doing this but it doesn’t work that well unfortunately.

Personally I would say don’t prematurely worry about this stuff, Tailwind’s insanely comprehensive and generous default config still ends up at under 30kb over the wire which is smaller than just about any image you’ll ever use on a site. On Sun, Nov 12, 2017 at 6:21 AM Owen Melbourne notifications@github.com wrote:

The Scenario/Question

With javascript we have the benefit of being able to detect what methods/functions are used and removing them from our final output.

With writing your own css you have the benefit of only writing what you need.

With using a css library/framework you do not have the benefit of including only whats needed.

You might only ever use 20% of the framework (in this case tailwind)

Does anybody have any suggestions or methods to replicate the tree-shaking affect to reduce unused css?

One quick thought I had was to basically only include tailwind in your project and use exclusively the @apply

So when writing your css you do like

.sm\:text-right { @apply .text-right }

Yes it means basically means creating a subset of tailwind - but from initial thoughts, is the only thing i can think of?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/tailwindcss/discuss/issues/53, or mute the thread https://github.com/notifications/unsubscribe-auth/AEH3bFBHou_Eek2TgvqBKHjcsOnYkbbWks5s1tSfgaJpZM4Qa19l .

[adamwathan]

Lot more discussion about this sort of thing here too if interested:

https://github.com/tailwindcss/discuss/issues/18