PurgeCSS CLI遗漏Tailwind带冒号类致样式失效，是命令调用有误吗？

类名丢失的核心原因是PurgeCSS默认的HTML内容提取规则不支持匹配带冒号的类名。
PurgeCSS默认的HTML提取正则仅匹配字母、数字、下划线、连字符组成的字符串，对于Tailwind常用的sm:grid-cols-2这类带冒号的响应式、状态变体类，会被拆分为sm和grid-cols-2两个独立字符串，完全无法匹配到完整类名，最终被判定为未使用而清理删除。

如果你使用的是Tailwind官方内置的PurgeCSS集成配置，本身已经内置了支持冒号的提取规则，不会出现这个问题；本次问题是因为使用了独立的CLI版PurgeCSS，没有引入Tailwind的默认提取规则导致的。

只需要为PurgeCSS配置自定义提取规则，让它能识别包含冒号的类名即可，不需要修改原有代码的类写法，以下是适配你当前CLI用法的两种实现方式：

方式一：直接在Makefile命令中添加参数 #

修改原有PurgeCSS命令，增加--default-extractor参数传入支持冒号的匹配正则：

NODE_ENV=production npx purgecss \
  --css css/*.css \
  --content public/*.html public/**/*.html \
  --output demo \
  --default-extractor /[a-zA-Z0-9:_-]+/g

方式二：使用配置文件（更易维护） #

如果后续需要调整更多规则，建议新建purgecss.config.js配置文件：

module.exports = {
  content: ['public/*.html', 'public/**/*.html'],
  css: ['css/*.css'],
  output: 'demo',
  defaultExtractor: content => content.match(/[a-zA-Z0-9:_-]+/g) || []
}

对应的Makefile命令简化为：

NODE_ENV=production npx purgecss --config purgecss.config.js
npx uglifycss demo/*.css > public/style.css
rm -rf demo/*.css

验证效果 #

配置完成后重新执行构建命令，打开生成的public/style.css，即可看到sm:grid-cols-2、lg:grid-cols-4等带冒号类对应的媒体查询样式，栅格布局会正常按断点切换。

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