Next.js+Tailwind CSS生产环境自定义任意宽度失效问题排查

API 探路者

2026-8-15

Next.js + Tailwind CSS 任意宽度生产环境失效问题解决

问题根源

生产环境中使用的@fullhuman/postcss-purgecss提取器正则无法识别Tailwind的任意值类名（比如w-[50px]），导致这类自定义样式被PurgeCSS误删除。原正则/[\w-/:]+(?<!:)/g仅能匹配字母、数字、连字符、斜杠、冒号，无法覆盖方括号及括号内的内容。

解决方案

方案1：修复PurgeCSS提取器正则

修改postcss.config.js中的defaultExtractor，使其能正确捕获任意值类名：

module.exports = {
  plugins: [
    "tailwindcss",
    process.env.NODE_ENV === "production"
      ? [
          "@fullhuman/postcss-purgecss",
          {
            content: [
              "./pages/**/*.{js,jsx,ts,tsx}",
              "./components/**/*.{js,jsx,ts,tsx}",
              "./stories/**/*.{js,jsx,ts,tsx}",
            ],
            defaultExtractor: (content) => {
              // 匹配常规Tailwind类名 + 任意值语法类名
              const matches = content.match(/[\w-/:]+(?<!:)|[^<>"'`\s]+?\[[^\]]+\]/g) || [];
              return matches;
            },
          },
        ]
      : undefined,
    "autoprefixer",
  ],
};

方案2：移除独立PurgeCSS依赖（推荐）

Tailwind CSS v3已内置内容扫描和未使用样式清除功能，无需单独配置@fullhuman/postcss-purgecss，步骤如下：

卸载PurgeCSS依赖：

npm uninstall @fullhuman/postcss-purgecss
# 或使用yarn
yarn remove @fullhuman/postcss-purgecss

简化postcss.config.js：

module.exports = {
  plugins: [
    "tailwindcss",
    "autoprefixer",
  ],
};

确认tailwind.config.js的content覆盖所有使用Tailwind的文件：

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./stories/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  variants: {
    extend: {
      opacity: ["disabled"],
    },
  },
};