Tailwindcss: Delete unused CSS rules with purifycss

[HapLifeMan]

Hey, I think it can be a good idea to implement purifycss in the docs (and maybe in Tailwind default config?), when running npm run production to delete all unused CSS rules in a path? Because we'll never use all defined properties :)

[adamwathan]

Unfortunately purifycss has a major bug that doesn't make it super useful with Tailwind, see here:

https://github.com/tailwindcss/discuss/issues/18#issuecomment-341572814

Hopefully they fix that one day; that would be great for our optimization story.

Here's a direct link to the issue on the purifycss repo:

https://github.com/purifycss/purifycss/issues/147

[adamwathan]

Gonna close this as addressed, thanks for bringing it up though!

[HapLifeMan]

Hey @adamwathan, I was really sad to see purifycss unmaintained...
So I decided to take over, fork and commit a fix, now we can use it with Tailwind ❤️

npm i -D purifycss-extended will solve all your problems :)

You can find the fork here: https://github.com/HapLifeMan/purifycss-extended!

Keep going 😁

[andrewdelprete]

Hey @adamwathan, the above package by @HapLifeMan works well via CLI but doesn't have a corresponding webpack plugin for Mix / webpack.

The author of PurgeCSS made some changes last night to work with Tailwind syntax. I feel that it's a little more flexible / robust than PurifyCSS.

I've written a post w/ some example gists at the top:

https://medium.com/@AndrewDelPrete/using-purifycss-to-remove-unused-tailwind-css-classes-173b3ee8ee01