Nuxt/examples/tailwindcss-purgecss
Xin Du (Clark) 454a9af242
feat(webpack)!: update postcss to v8 (#9671)
Co-authored-by: Daniel Roe <daniel@roe.dev>
2023-02-02 07:13:28 -08:00
..
.github
assets/css examples(tailwindcss-purgecss) : update tailwindcss 0.6 to 1.6. using purgecss inside tailwindcss (#7800) 2020-07-30 16:45:49 +02:00
components examples(tailwindcss-purgecss) : update tailwindcss 0.6 to 1.6. using purgecss inside tailwindcss (#7800) 2020-07-30 16:45:49 +02:00
layouts
pages examples(tailwindcss-purgecss) : update tailwindcss 0.6 to 1.6. using purgecss inside tailwindcss (#7800) 2020-07-30 16:45:49 +02:00
.gitignore
nuxt.config.js feat(webpack)!: update postcss to v8 (#9671) 2023-02-02 07:13:28 -08:00
package.json examples(tailwindcss-purgecss) : update tailwindcss 0.6 to 1.6. using purgecss inside tailwindcss (#7800) 2020-07-30 16:45:49 +02:00
README.md doc: create/update README.mds for examples (#4980) 2019-02-08 15:48:30 +01:00
tailwind.config.js examples(tailwindcss-purgecss) : update tailwindcss 0.6 to 1.6. using purgecss inside tailwindcss (#7800) 2020-07-30 16:45:49 +02:00

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