使用 Tailwind 时如何使用 Webpack 缩小 CSS

Question

使用 ReactJS 时，Tailwind suggests using CRACO（创建 React 应用配置覆盖）。我基于blog post on minifying css names 和CRACO docs 的最佳尝试使我尝试了下面的 craco.config.js 文件。但它仍然不适用于 Tailwind.css。分别在两个评论的位置尝试过。

在通过 webpack 或外部包使用 TailwindCSS 时，是否有人能够缩小/混淆 css 类名？如果是这样，请详细说明您的配置文件或一些分步说明，因为我已经花了几个月的时间试图解决这个问题......

// 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
        //     },
        // }
    },
};

Answer 1

您可以通过添加 cssnano 作为 PostCSS 插件来缩小 CSS，如下所示：

// 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
        //     },
        // }
    },
};

确保同时安装 cssnano 和 npm 或 yarn。

混淆 Tailwind CSS 比仅仅缩小它要困难得多，而且在我看来，这可能不值得付出努力。不过之前也有discussions搞混淆了。