PurgeCSS忽略使用的类

Question

Tailwind和PostCSS / PurgeCSS刚开始使用，我正尝试减小CSS文件的大小。在 @tailwind base ... 下面的tailwind.css文件中添加一些自定义css，然后在 tailwind.config <中添加一些变量，例如 h-(screen-1.5) / strong>文件，我注意到它正在工作！ 当我运行 npm运行生产时，在构建文件夹中找不到类似 flex ... 的顺风车类，但我找到了添加的自定义类！这是添加的自定义CSS的示例

@tailwind base;
@tailwind components;
@tailwind utilities;

.toggle-checkbox:checked {
    @apply: right-0;
    right: 0;
    border-color: #3db992;
}
.toggle-checkbox:checked + .toggle-label {
    background-color: #3db992;
}

@media (min-width: 400px) {
    .btn:before {
        content: '';
        width: 15px;
        height: 15px;
        position: absolute;
        top: 13px;
        left: 14px;
        background: url(../img/ic.svg) no-repeat;
    }
}

<div class="flex flex-col sb:flex-row items-center max-w-screen-hp mx-auto px-3 md:px-6"></div>

我尝试添加注释 / purgecss开始忽略 / 和 / purgecss结束忽略 / ，但徒劳的是，我不知道这是否与Extractor有关！这是我的postcss.confige代码：

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./public/**/*.html'],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
})
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ...process.env.NODE_ENV === 'production'
      ? [purgecss, require('cssnano')]
      : []
  ]
}

Answer 1

Tailwind CSS具有内置的PurgeCSS。该页面将帮助您删除tailwindcss中未使用的样式。

https://linvi.github.io/tweetinvi/dist/authentication/authentication.html