Tailwindcss: Production CSS size 300+kb

[besrabasant]

I am fan of tailwindcss... A great tool.

I am facing an issue while build for production.

My Production build size is 311 kb.

Where as in the docs, it says

Using the default configuration, Tailwind CSS comes in at 36.4kb minified and gzipped.

Why is it so?

I am also using PurgeCSS in my webpack-mix configuration.

[adamwathan]

Can you share your project publicly? PurgeCSS definitely isn't doing anything if you are still ending up with 311kb.

[adamwathan]

For what it's worth, here's our default build prebuilt and minified:

https://unpkg.com/[email protected]/dist/tailwind.min.css

It's 292kb raw, but only 49.8kb gzipped, or 24.6kb when compressed with brotli.

[besrabasant]

@adamwathan Here's the link to the project

Steps to reproduce

• cd web/app/themes/yellowstudio
• run npm install && npm run production

[knowler]

@besrabasant

Your packages show laravel-mix-purgecss, but the webpack.mix.js uses purgecss-webpack-plugin and glob-all — which aren't in the package.json. You need to use one or another. If you use laravel-mix-purgecss, you only need to use:

if (mix.inProduction()) {
  mix.purgeCss();
}

I tested it for either case and they both work, however, you probably need to add the Tailwind extractor with the laravel-mix-purgecss method. Final CSS size is 3.23 kB.

[adamwathan]

Yep @knowler is right, if you are using the laravel-mix-purgecss package you need to follow their instructions to set it up instead of the instructions in our docs.

PR'd the change for you:

https://github.com/besrabasant/tailwind-issue/pull/1

[besrabasant]

Thanks @knowler .

the reason for not using laravel-mix-purgecss is that, It messes up my styling on production.

Strips out some of the extracted component classes.

An almost same issue as here but I have my custom classes in .scss files.