How to Minify CSS with Webpack when using Tailwind

user_12894626 0
Viewed 2651

When using ReactJS, Tailwind suggests using CRACO (Create React App Configuration Override). My best attempt based on this blog post on minifying css names and the CRACO docs has led me to trying the craco.config.js file below. But it still doesn't work with Tailwind.css. Tried it in both the commented locations independently.

Has anyone been able to minify/obfuscate css classnames when using TailwindCSS either via webpack or an external package? Please detail your config file or some step by step instruction if so, as I've been spending months trying to figure this out...

// craco.config.js
module.exports = {
    style: {
        postcss: {
            plugins: [require('tailwindcss'), require('autoprefixer')],
            // loaderOptions: {
            //     modules: {
            //         localIdentName: '[sha1:hash:hex:4]'
            //     },
            //     importLoaders: 1
            // },
        },
        // css: {
        //     loaderOptions: {
        //         modules: {
        //             localIdentName: '[sha1:hash:hex:4]'
        //         },
        //         importLoaders: 1
        //     },
        // }
    },
};
tailwind-css webpack reactjs obfuscation css
1 Answers

You can minify your CSS by adding cssnano as a PostCSS plugin as follows:

// craco.config.js
module.exports = {
    style: {
        postcss: {
            // add cssnano as a plugin here
            plugins: [require('tailwindcss'), require('autoprefixer'), require('cssnano')],
            // loaderOptions: {
            //     modules: {
            //         localIdentName: '[sha1:hash:hex:4]'
            //     },
            //     importLoaders: 1
            // },
        },
        // css: {
        //     loaderOptions: {
        //         modules: {
        //             localIdentName: '[sha1:hash:hex:4]'
        //         },
        //         importLoaders: 1
        //     },
        // }
    },
};

Make sure to also install cssnano with npm or yarn.

Obfuscating Tailwind CSS is significantly harder than just minifying it, and in my opinion it's probably not worth the effort. However, there have been discussions on obfuscation before.

user_34579810
Related