相关疑难解决方法(0)

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

对于 Tailwind 和 PostCSS/PurgeCSS 来说相当新,所以希望这是一个相当简单的修复。

在我的 中tailwind.config.js,我扩展了一些间距值,包括添加 0.5 值以与默认的 Tailwind 间距比例对齐。我的文件如下所示(摘录):

module.exports = {
    important: false,
    theme: {
        spacing: {
            '0.5': '0.125rem',
        },
    },
}
Run Code Online (Sandbox Code Playgroud)

然后我使用 PostCSS 编译我的 CSS,如下所示,你可以看到我使用了一堆效果很好的插件:

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

到目前为止,一切都进展顺利!但是,我想清除 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'),
    ] …
Run Code Online (Sandbox Code Playgroud)

purge postcss tailwind-css css-purge

6
推荐指数
1
解决办法
4709
查看次数

标签 统计

css-purge ×1

postcss ×1

purge ×1

tailwind-css ×1