mirror of https://github.com/nuxt/nuxt.git synced 2024-11-05 21:53:56 +00:00

History

charlie hield ec9724f712 chore: tailwind purgecss example (#4214 ) * Add tailwindcss purgecss example * Eslint fixes		2018-11-08 10:37:38 +01:00
..
.github	chore: tailwind purgecss example (#4214 )	2018-11-08 10:37:38 +01:00
assets/css	chore: tailwind purgecss example (#4214 )	2018-11-08 10:37:38 +01:00
components	chore: tailwind purgecss example (#4214 )	2018-11-08 10:37:38 +01:00
layouts	chore: tailwind purgecss example (#4214 )	2018-11-08 10:37:38 +01:00
pages	chore: tailwind purgecss example (#4214 )	2018-11-08 10:37:38 +01:00
.gitignore	chore: tailwind purgecss example (#4214 )	2018-11-08 10:37:38 +01:00
nuxt.config.js	chore: tailwind purgecss example (#4214 )	2018-11-08 10:37:38 +01:00
package.json	chore: tailwind purgecss example (#4214 )	2018-11-08 10:37:38 +01:00
postcss.config.js	chore: tailwind purgecss example (#4214 )	2018-11-08 10:37:38 +01:00
README.md	chore: tailwind purgecss example (#4214 )	2018-11-08 10:37:38 +01:00
tailwind.js	chore: tailwind purgecss example (#4214 )	2018-11-08 10:37:38 +01:00

README.md

Nuxt Tailwind CSS + Purgecss

Demo of using Nuxt with Tailwind CSS and Purgecss to drastically reduce CSS size.

Demo

https://nuxt-tailwindcss-purgecss.surge.sh/

Before and after stats

The before CSS bundle came out to 299kb, where as after running it through Purgecss, it dropped to 3kb (granted I'm only using around a dozen classes).

Performance

And since the CSS remains inline (due to using Purgecss as a postcss plugin) it scores perfect on Google Page Speed Insights! (This is after running nuxt generate and deploying the dist folder)