Next.js项目Tailwind CSS开发正常，build打包后样式不生效问题

以下是针对你当前问题的修复步骤：

• 全局样式引入错误修复
  你在_app.js中引入的是tailwindcss/tailwind.css，但你自定义的globals.css已经声明了Tailwind的基础、组件、工具类指令，二者冲突会导致构建时样式优先级异常。
  将_app.js的引入语句替换为你自己的全局样式文件即可：

import "../styles/globals.css";

const MyApp = ({ Component, pageProps }) => {
  return (
    <>
      <Component {...pageProps} />
    </>
  );
};

export default MyApp;

• Tailwind配置错误修复
  你当前的配置存在两处明显问题：一是zIndex配置项中混入了无效的颜色值Secondary: "#FFFFFF"，会导致构建时样式生成异常；二是如果你使用的是Tailwind v3版本，purge字段已经废弃改为content，且不需要手动声明mode: "jit"（v3默认开启JIT模式）。
  修正后的tailwind.config.js参考：

module.exports = {
  // Tailwind v3用content字段替代原有purge，v2可保留purge和mode: "jit"
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        primary: "#000000",
        secondary: "#FFFFFF", // 建议统一小写命名，避免大小写敏感导致的匹配问题
      },
      zIndex: {
        auto: "auto",
        negative: "-1",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

• 最终验证步骤
  修改完成后删除项目根目录的.next缓存文件夹，再重新执行npm run build即可。如果仍有问题，检查项目目录结构是否和配置中的路径匹配，确认pages、components、styles文件夹都在项目根目录。

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