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

Question

Tailwind和PostCSS/PurgeCSS相当新，所以希望这是一个相当简单的修复。

在我的tailwind.config.js中，我扩展了一些间距值，包括添加0.5值以与默认的尾风间距比例对齐。我的文件看起来像这样(提取)：

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) || [],

解决了它