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

Posted 2023-03-07

【中文标题】使用 Tailwind 时如何使用 Webpack 缩小 CSS

【英文标题】：How to Minify CSS with Webpack when using Tailwind

【发布时间】：2021-06-05 09:03:39

【问题描述】：

使用 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
        //     ,
        // 
    ,
;

【参考方案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搞混淆了。

【讨论】：

感谢您的回复。绝对欣赏它。我尝试按照您提到的方式安装和添加，但类名没有改变。我也试过require('cssnano')( preset: 'default' ) 无济于事。你有没有使用你提到的任何机会让它工作？

cssnano 缩小 CSS，但不会混淆它。在我看来，混淆是不值得的，因为在考虑到 gzip 压缩之后，它并没有节省那么多带宽。我建议只缩小而不混淆（没有多少网站故意混淆 CSS 类名......）

谢谢内森。我可以将其缩小，这没问题。只是按照描述在 craco.config.js 文件中添加代码并不会缩小它。我假设缩小 classNames 仍会将其从 px-20 更改为 a74 或随机的东西