Tailwindcss 2.0 Purge and Minification for Production

[n1ghtmare]

Hi, I just upgraded to Tailwindcss 2.0. I used to have my own PostCSS config and build using postcss directly. Now I see in the documentation for 2.0 that minification (along with purging) is supported out of the box (I'm referring specifically to the
build for production part - ".. This will make sure Tailwind removes any unused CSS and minifies the CSS file for best performance..."). However when I build the css is correctly purged, but not minified.

This is how my config looks like:

module.exports = {
    purge: ["./Client/**/*.tsx", "./Views/**/*.cshtml"],
    theme: {
        extend: {
            spacing: {
                72: "18rem",
                84: "21rem",
                96: "24rem"
            }
        }
    },
    variants: {
        borderWidth: ["responsive", "last"],
        borderRadius: ["last"]
    },
    plugins: []
};

Am I doing something wrong? Should I add something to enable minification?

[adamwathan]

Hey! We purge out of the box but don't minify, because lots of people are using other PostCSS plugins after Tailwind like autoprefixer. Best to minify as the very last step 👍🏻

[n1ghtmare]

Well, that's bummer. I got all excited by the aforementioned statement. Is there any way to configure minification without resorting to a custom postcss config and replacing tailwindcss build with the postcss-cli build command? That for some reason didn't work anymore with tailwindcss 2.0. Like, what do people normally do in this situation?

Anyway, thank you for all the wonderful work, it's really appreciated!

P.S. - Would a minification option be something you would consider for tailwindcss?

[juho-hanhimaki]

I too would appreciate the option to build the complete production ready css with tailwindcss build command. I am using Tailwind with Blazor (C#/webassembly-based system) so there is no need for traditional JS workflow/pipeline.

[adamwathan]

Ah I understand better what you are looking for now! I think this would make sense as part of the Tailwind CLI for sure, we can add it just like autoprefixer is already included.

[n1ghtmare]

That would be amazing, and a huge win if you ask me - it would be so much simpler to use, and people would see significant reduction of their final css file size (mine went from 12KB to 4KB after minification). Thanks a lot for all the good work you guys are doing! Congrats on the launch of 2.0 and the absolute boss of a website!

[n1ghtmare]

In case anyone else has stumbled on this, here is what I did:

npm install --save-dev cssnano

I then created a postcss.config.js as follows:

module.exports = ({ env }) => ({
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
        cssnano: env === "production" ? { preset: "default" } : false
    }
});

Then in my build scripts (in package.json) I replaced:

    "scripts": {
        "build:tailwind-dev": "tailwindcss build wwwroot/css/tailwind.css -o wwwroot/css/tailwind.generated.css",
        "build:tailwind-prod": "cross-env NODE_ENV=production tailwindcss build wwwroot/css/tailwind.css -o wwwroot/css/tailwind.generated.min.css",
        ...
    },

with:

    "scripts": {
        "build:tailwind-dev": "postcss wwwroot/css/tailwind.css -o wwwroot/css/tailwind.generated.css",
        "build:tailwind-prod": "cross-env NODE_ENV=production postcss wwwroot/css/tailwind.css -o wwwroot/css/tailwind.generated.min.css",
        ...
    },

It's now all purged and minified and my output is tiny. I hope this helps someone :)! I'm not sure if this is the "idiomatic" way to do it - @adamwathan perhaps you can confirm?

[djmonzyk]

I've been struggling with this all day, so YES YES YES you helped someone, thanks @n1ghtmare for documenting this so well...thanks!