Nuxt/examples/tailwindcss-purgecss/README.md
HG c0311bc22f doc: create/update README.mds for examples (#4980)
* Create README.md

* Update README.md

* Update README.md

* Update README.md

* Create README.md

* Update README.md

* Update README.md

* Create README.md

* Update README.md

* Update README.md

* Create README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Create README.md

* Update Readme.md

* Create README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Create README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Create README.md

* Create README.md

* Update README.md

* Create README.md

* Create README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Create README.md

* Update README.md

* Create README.md

* Update README.md

* Update README.md

* Update README.md

* Create README.md

* Update README.md

* Update examples/with-vuikit/README.md

Co-Authored-By: husayt <husayt@gmail.com>

* Update examples/auth-routes/README.md

Co-Authored-By: husayt <husayt@gmail.com>

* Update examples/middleware/README.md

Co-Authored-By: husayt <husayt@gmail.com>

* Update examples/vuex-store-modules/README.md

Co-Authored-By: husayt <husayt@gmail.com>

* Update examples/with-feathers/README.md

Co-Authored-By: husayt <husayt@gmail.com>

* Update examples/with-element-ui/README.md

Co-Authored-By: husayt <husayt@gmail.com>

* Update examples/with-cookies/README.md

Co-Authored-By: husayt <husayt@gmail.com>

* Update examples/vuex-store/README.md

Co-Authored-By: husayt <husayt@gmail.com>

* Update examples/vuex-persistedstate/README.md

Co-Authored-By: husayt <husayt@gmail.com>

* Update examples/with-firebase/README.md

Co-Authored-By: husayt <husayt@gmail.com>
2019-02-08 15:48:30 +01:00

28 lines
949 B
Markdown

# 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/](https://nuxt-tailwindcss-purgecss.surge.sh/)
![demo](.github/demo.png)
### 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](.github/tailwind-default.png)
![tailwind purgecss](.github/tailwind-purgecss.png)
### 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](.github/pagespeed-mobile.png)
![pagespeed desktop](.github/pagespeed-desktop.png)
### Other
See also this [demo](https://github.com/nuxt/nuxt.js/tree/dev/examples/with-purgecss)