首次使用Laravel Mix：PurgeCSS仅保留Tailwind基础样式问题求助

这种情况我之前也碰到过，大概率是PurgeCSS没正确识别到你代码里的类名，或者配置有冲突，咱们一步步排查：

1. 检查PurgeCSS的扫描路径是否完整 #

你提到要扫描src和templates下的twig、html，但别忘了你的src/css/components/shared.css里的自定义样式也需要被扫描！如果PurgeCSS没读取到这个CSS文件，它会认为这些样式没被使用，直接删掉。

确保你的路径配置包含了CSS文件，比如在webpack.mix.js里的PurgeCSS配置：

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: [
    './templates/**/*.{twig,html}',
    './src/**/*.{twig,html,css}', // 这里加上css后缀
    './src/js/**/*.js', // 如果JS里有动态添加的类名，也得加上
  ],
  // 关键：自定义提取器，适配Tailwind的特殊类名（比如hover:bg-blue-500）
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
});

2. 优先使用Tailwind内置的Purge（Content配置） #

如果你用的是Tailwind v3+，官方已经把PurgeCSS整合进框架了，单独安装PurgeCSS插件反而容易冲突。建议直接在tailwind.config.js里配置content字段，代替Mix里的PurgeCSS插件：

module.exports = {
  content: [
    './templates/**/*.{twig,html}',
    './src/**/*.{twig,html,css,js}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

然后Mix的配置就简化成：

mix.postCss('src/css/app.css', 'dist/css', [
  require('tailwindcss'),
]);

Tailwind会自动在生产环境（npm run prod）启用Purge，不需要额外判断环境。

3. 排查动态类名的问题 #

如果你的Twig模板里有动态生成的类名（比如{{ 'bg-' ~ color }}），PurgeCSS的静态扫描是识别不到的，这时候需要把这些类手动加入安全列表：

• 在Tailwind配置里加：

module.exports = {
  content: [...],
  safelist: [
    'bg-red-500',
    'text-blue-600',
    // 或者用正则匹配批量类名
    /bg-.+/,
    /text-.+/
  ],
  // ...其他配置
}

• 如果用单独的PurgeCSS插件，就在插件配置里加safelist字段：

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: [...],
  safelist: {
    standard: ['bg-red-500', 'text-blue-600'],
    deep: [/bg-.+/, /text-.+/]
  },
  // ...其他配置
});

4. 确认生产环境的判断逻辑 #

如果你坚持用Mix里的环境判断，确保mix.inProduction()是正确触发的：

mix.postCss('src/css/app.css', 'dist/css', [
  require('tailwindcss'),
  // 只有生产环境才加PurgeCSS
  ...(mix.inProduction() ? [purgecss] : [])
]);

有时候如果本地配置了NODE_ENV=development，npm run prod可能不会正确切换环境，可以手动指定：

NODE_ENV=production npm run prod

5. 检查路径大小写问题 #

如果是在Linux/macOS环境下，路径是区分大小写的，比如你配置里写的./Templates但实际目录是./templates，PurgeCSS会找不到文件，导致扫描失效。务必保证配置路径和实际文件路径完全一致。

按照这个顺序排查，应该能解决样式丢失的问题。

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