TailwindCSS/PurgeCSS白名单配置不生效，动态类被误删如何解决？

核心问题排查 #

你当前配置的核心错误是whitelist参数嵌套位置不对，PurgeCSS的白名单是顶层配置项，不需要放到options字段下，所以配置的白名单完全没有被识别。

可行解决方案 #

• 方案1：直接修正现有PurgeCSS配置
  修改postcss.config.js中的purgecss配置，移除多余的options嵌套：

const purgecss = require('@fullhuman/postcss-purgecss')

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-nested'),
    purgecss({
      content: [
        '**/*.twig',
      ],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
      // whitelist直接放在顶层配置
      whitelist: [
        'md:w-1/3',
      ],     
    })
  ]
}

如果你使用的是v3及以上版本的PurgeCSS，whitelist参数已重命名为safelist，对应修改参数名即可。

• 方案2：使用Tailwind内置的Purge能力（更推荐，避免插件冲突）
  Tailwind本身已经集成了PurgeCSS，不需要额外引入第三方PurgeCSS插件，反而容易出现优先级冲突，配置步骤如下：

1. 清理postcss.config.js，移除所有PurgeCSS相关的代码：

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

2. 在tailwind.config.js中添加purge配置：

const plugin = require('tailwindcss/plugin')

module.exports = {
  purge: {
    content: ['**/*.twig'],
    safelist: ['md:w-1/3'],
    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
  },
  theme: {
    container: {
      center: true,
    },
    extend: {
      fontSize: {
        '9xl': '10rem',
      },
      fontFamily: {
        'sans': ['Roboto', 'system-ui'],
      },
      lineHeight: {
        '11': '2.75rem',
        '12': '3rem',
        '14': '3.5rem',
      }
    }, 
  },
  variants: {
    extend: {
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    }
  },
}

• 额外排查点
  如果你的CMS动态类是拼接生成的（比如存在md:w-${变量}这类逻辑），除了加白名单外，也可以把所有可能用到的动态类单独写到项目里的safe-classes.txt文件中，把这个文件加入到content扫描路径即可。

内容的提问来源于stack exchange，提问作者Jonathan