Question

Tailwind和PostCSS / PurgeCSS相当新，因此希望这是一个相当简单的修复程序。

在我的tailwind.config.js中，我正在扩展一些间距值，包括添加一个0.5值以与默认的Tailwind间距比例尺对齐。我的文件如下所示（提取）：

module.exports = {
    important: false,
    theme: {
        spacing: {
            '0.5': '0.125rem',
        },
    },
}

然后，我使用PostCSS编译我的CSS，如下所示，如您所见，我使用了一堆效果很好的插件：

module.exports = {
    parser: 'postcss-scss',
    plugins: [
        require('postcss-import'),
        require('postcss-nested'),
        require('postcss-responsive-type'),
        require('tailwindcss'),
        require('autoprefixer'),
        require('cssnano'),
    ]
}

到现在为止，一切都很好！但是，我想清除CSS以删除Tailwind创建的所有未使用的实用程序类。这会影响我的postcss文件，如下所示：

module.exports = {
    parser: 'postcss-scss',
    plugins: [
        require('postcss-import'),
        require('postcss-nested'),
        require('postcss-responsive-type'),
        require('tailwindcss'),
        require('autoprefixer'),
        require('@fullhuman/postcss-purgecss')({
            content: [
                './*.php',
                './**/*.php',
            ],
            defaultExtractor: content => content.match(/[\w-:/]+(?<!:)/g) || []
        }),
        require('cssnano'),
    ]
}

这是我失去某些样式的地方，尤其是特制的Tailwind样式，例如.h-0.5。

我怀疑问题在defaultExtractor行内吗？

defaultExtractor: content => content.match(/[\w-:/]+(?<!:)/g) || []

有人能伸出援手吗？谢谢

Answer 1

解决了！正如预期的那样，这非常简单。我只是想念'。'。对于defaultExtractor：

defaultExtractor: content => content.match(/[\w-:/]+(?<!:)/g) || []

Answer 2

defaultExtractor: (content) => content.match(/[\w-:./]+(?<!:)/g) || [],

已修复

TailwindCSS / PurgeCSS提取器字符串删除了一些类

2 个答案: