PurgeCSS 忽略使用的类

Posted 2023-03-07

【中文标题】PurgeCSS 忽略使用的类

【英文标题】：PurgeCSS ignores the used classes

【发布时间】：2021-01-14 12:10:34

【问题描述】：

对于 Tailwind 和 PostCSS/PurgeCSS 来说还算新，我正在尝试减小我的 CSS 文件的大小。在 @tailwind base... 下面的 tailwind.css 文件中添加一些自定义 css 之前，在我的 tailwind.config 中添加一些变量，如 h-(screen-1.5) > 文件，我注意到它正在工作！ 当我运行 npm run production 时，我在构建文件夹中找不到像 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>

我尝试添加 cmets / purgecss start ignore / 和 / purgecss end忽略/，但徒劳无功，我不知道它是否与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')]
      : []
  ]

【问题讨论】：

！！我不得不添加一个 .在默认提取器中

【参考方案1】：

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

https://tailwindcss.com/docs/controlling-file-size