Tailwind CSS 样式在生产中被移除

Posted 2023-03-07

【中文标题】Tailwind CSS 样式在生产中被移除

【英文标题】：Tailwind CSS Styles Getting Removed in Production

【发布时间】：2021-04-17 00:08:53

【问题描述】：

我的package.json 有以下脚本：

我在styles.css 中有以下 CSS（我只使用一个 CSS 文件）：

    .btn 
        @apply rounded py-2 px-4;
    
    .btn.xs 
        @apply px-1;
    
    .btn.sm 
        @apply py-1 px-2;
    
    .btn.md 
        @apply py-2 px-4;
    


    .btn.normal 
        border: 2px solid #A8A878;
        color: #000;
    
    .btn.normal:hover 
        background-color: #A8A878;
        color: #FFF;
    
    .btn.normal:focus 
        --tw-ring-shadow: 0 0 0 2px #A8A87844;
    

    "scripts": 
        "dev-no-watch": "postcss src/styles.css -o dist/css/styles.css",
        "dev": "postcss src/styles.css -o dist/css/styles.css --watch",
        "build": "cross-env NODE_ENV=production postcss src/styles.css -o dist/css/styles.css && cleancss -o dist/css/styles.css dist/css/styles.css"
    ,

运行开发脚本运行良好，生成的代码具有我所有的风格。

运行构建脚本运行没有错误，但是，它删除了我的样式的部分，我觉得这令人难以置信。我的.btn 样式已应用，但我的.btn.normal 样式未应用。

我认为这是由于cleancss 清理了--tw-ring-shadow 属性，但是删除构建脚本的cleancss 部分仍然存在相同的问题。删除 cross-env NODE_ENV=production 可以解决问题，但显然我想缩小文件以用于生产。

一位朋友警告说：

如果您的 CSS 文件包含 Tailwind 引用，那么它将在构建过程中运行 purge css。如果发生这种情况，您可以按照此处的说明重新排序文件来避免这种情况

并在此处链接我：

https://tailwindcss.com/docs/optimizing-for-production#removing-all-unused-styles

不过我的 tailwind.config.js 应该没问题：

module.exports = 
    purge: [
        './dist/**/*.html',
        './dist/**/*.js'
    ],
    darkMode: false, // or 'media' or 'class'
    theme: 
        extend: ,
    ,
    variants: 
        extend: ,
    ,
    plugins: [],

这是我的postcss.config.js 供后代使用：

module.exports = 
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ]
;

我看过的一些链接：

https://github.com/tailwindlabs/tailwindcss/discussions/1697

Tailwind css purge removes all dark classes

【参考方案1】：

我的朋友帮我找到了这个。 purgecss 删除它在 html 中看不到的类。我的 JS 正在使用类向页面动态添加按钮，而 purgecss 没有看到它们，因此将它们删除。将它们添加到具有隐藏类作品的项目中

<span class="hidden normal"></span>

Purgecss 还有一个我将使用的白名单选项。希望这个答案可以帮助任何在动态插入元素时通过清除删除自定义样式的人。

编辑：指向 puprgecss 安全列表文档的链接：https://purgecss.com/safelisting.html

【讨论】：

谢谢你。我遇到了完全相同的问题，起初不确定发生了什么。经过一番思考，我意识到清除不够聪明，无法弄清楚我在 JS 中动态构造类名的原因。所以我用隐藏的 div 完成了这个技巧，它使用了所有那些有效的已删除类。令我困惑的是，并非我动态添加的所有类都被删除了：/

实际上，官方文档解释了这里发生了什么：tailwindcss.com/docs/optimizing-for-production 引用开始：“这意味着避免在模板中使用字符串连接动态创建类字符串很重要，否则 PurgeCSS 不会知道要保留这些课程。”报价结束。解决方案是在tailwind.config.js 中使用“安全列表”对象来列出所有以时髦方式动态添加的类（如连接）。