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

Question

在使用 ReactJS 时， Tailwind 建议使用 CRACO （创建 React 应用程序配置覆盖）。 根据这篇关于缩小 css 名称和CRACO 文档的博客文章，我的最佳尝试使我尝试了下面的 craco.config.js 文件。 但它仍然不适用于 Tailwind.css。 分别在两个评论的位置尝试过。

在通过 webpack 或外部 package 使用 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
        //     },
        // }
    },
};

确保还使用npm或yarn安装cssnano 。

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