部署在Vercel的Next.js应用Tailwind CSS样式未生效问题

问题根因 #

你的Tailwind配置文件中purge配置项的glob匹配规则存在语法错误，导致生产构建时Tailwind无法正确扫描到项目中使用的样式类，所有未被扫描到的样式都被Tree Shaking移除，因此部署后样式全部失效。本地开发环境下Tailwind默认不会开启生产环境的样式裁剪逻辑，因此显示正常。

具体错误点 #

查看你的tailwind.config.js配置，第一行purge路径的文件后缀多了多余空格：

// 错误写法：后缀之间有空格，glob无法正确匹配文件
"./pages/**/*.{js, ts, jsx, tsx}"

glob路径匹配中括号内的后缀不允许有多余空格，空格会被识别为文件名的一部分，因此Tailwind扫描不到pages目录下的所有文件，只会扫描components目录的文件。

排查与解决步骤 #

• 第一步：修正tailwind.config.js中的purge路径配置，移除后缀之间的多余空格

module.exports = {
  mode: "jit",
  // 修正后的配置：去掉逗号后的多余空格
  purge: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}"
  ],
  // 其余配置保持不变
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/forms"),
    require("tailwind-scrollbar"),
    require("tailwind-scrollbar-hide"),
  ],
};

• 第二步：本地验证生产构建是否正常，执行npm run build && npm run start启动生产环境预览，确认样式显示正常
• 第三步：将修改后的配置提交到代码仓库，重新触发Vercel部署即可

其他可能的排查点（如果修正后仍有问题） #

• 确认package.json中Tailwind的版本和本地开发环境版本一致，避免版本差异导致的兼容问题
• 确认项目根目录的postcss.config.js配置正确，已经引入tailwindcss和autoprefixer插件，示例配置如下：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

• 确认全局CSS文件中已经正确引入Tailwind的基础样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

内容的提问来源于stack exchange，提问作者Tanishq SIngh Anand