0

Tailwind 和 PostCSS/PurgeCSS 相当新，我试图减小我的 CSS 文件的大小。在@tailwind base...下面的tailwind.css文件中添加一些自定义css之前，以及h-(screen-1.5)我的tailwind.config文件中的一些变量之前，我注意到它正在工作！当我运行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>

我曾尝试添加评论/ purgecss start ignore /和/ purgecss end ignore /但徒劳无功，我不知道它是否与提取器有关！这是我的 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')]
      : []
  ]
}

4

1 回答 1

0

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

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

于 2020-10-05T09:59:44.170 回答