Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-13 17:43:59 +00:00
Code Issues Packages Projects Releases Wiki Activity
37bdf7496e
Nuxt/examples/tailwindcss-purgecss
History
pooya parsa e7cc2757c3 refactor: update eslint-config to 1.x 
Co-authored-by: Alexander Lichter <manniL@gmx.net>
2019-07-10 15:15:49 +04:30
..
.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 refactor: use PascalCase for components names (#4396) 2018-11-24 22:19:19 +03:30
layouts refactor: use PascalCase for components names (#4396) 2018-11-24 22:19:19 +03:30
pages refactor: use PascalCase for components names (#4396) 2018-11-24 22:19:19 +03:30
.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 fix(examples): fix deps on codesandbox (#4828) 2019-01-22 11:04:19 +03:30
postcss.config.js refactor: update eslint-config to 1.x 2019-07-10 15:15:49 +04:30
README.md doc: create/update README.mds for examples (#4980) 2019-02-08 15:48:30 +01:00
tailwind.js refactor: update eslint-config to 1.x 2019-07-10 15:15:49 +04:30

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/

demo

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).

tailwind default tailwind purgecss

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)

pagespeed mobile pagespeed desktop

Other

See also this demo