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

【问题标题】：TailwindCSS / PurgeCSS extractor string removing some classesTailwindCSS / PurgeCSS 提取器字符串删除了一些类
【发布时间】：2020-06-18 11:01:18
【问题描述】：

对于 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) || []

有人可以帮忙吗？谢谢

【问题讨论】：

标签： postcss tailwind-css purge css-purge

【解决方案1】：

解决了！正如预期的那样，它非常简单。我只是错过了'。对于默认提取器：

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

【讨论】：

还“。”是不是被排除在外？ defaultExtractor: content => content.match(/[\w-:./]+(?

【解决方案2】：

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

修好了

【讨论】：