Tailwind CSS 样式在生产中被移除

Question

我的 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 样式未应用。

我认为这是由于 --tw-ring-shadow 清除了 cleancss 属性，但是删除构建脚本的 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

Answer 1

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

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

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

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