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

我认为这是由于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

Answer 1

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

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

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

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