Next.js构建生产包时Tailwind CSS样式不生效问题

问题现象 #

• 开发模式执行npm run dev时，Tailwind CSS运行正常，样式可正常加载渲染
• 执行构建命令npm run build或启动生产服务npm run start时，Tailwind CSS样式完全不生效
• 项目基于Next.js开发Chrome扩展，参考Next.js开发Chrome扩展的相关教程实现

环境版本 #

• Next.js: 12.1.6
• Tailwind CSS: ^3.1.4

现有配置 #

tailwind.config.js（原文件名笔误标注为tailwind.config.css） #

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

postcss.config.js #

module.exports = {
  plugins: {
    tailwindcss: {
      config: join(__dirname, 'tailwind.config.js'),
    },
    autoprefixer: {}
  }
}

package.json #

{
  "name": "demoproject",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "next start",
    "lint": "next lint",
    "dev": "next dev",
    "build": "next build && next export && mv out/_next out/next && sed -i '' -e 's/\/_next/\.\/next/g' out/**.html && mv out/index.html ../extension && rsync -va --delete-after out/next/ ../extension/next/ && rm -rf out && rsync -va --delete-after public/next-assets ../extension/"
  },
  "dependencies": {
    "@headlessui/react": "^1.6.5",
    "@heroicons/react": "^1.0.6",
    "@tailwindcss/forms": "^0.5.2",
    "@types/react": "^18.0.14",
    "next": "12.1.6",
    "path": "^0.12.7",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-toastify": "^9.0.5"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "eslint": "8.18.0",
    "eslint-config-next": "12.1.6",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.4"
  },
  "watch": {
    "build": {
      "patterns": [
        "styles/**",
        "pages/**",
        "public/**",
        "helpers/**",
        "next.config.js"
      ],
      "ignore": [
        "out",
        "node_modules",
        ".next",
        ".vscode"
      ],
      "extensions": [
        "js",
        "json"
      ]
    }
  }
}

next.config.js #

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
  }
  
  module.exports = {
    images: {
      loader: 'akamai',
      path: '',
    },
  }

修复方案 #

按以下顺序修改配置即可解决生产环境样式失效问题：

1. 修复postcss.config.js依赖缺失问题
   配置中直接使用了path模块的join方法但未引入依赖，会导致生产构建时PostCSS无法初始化Tailwind插件，开发模式Next.js有容错机制所以未触发异常。修改为：

const { join } = require('path')
module.exports = {
  plugins: {
    tailwindcss: {
      config: join(__dirname, 'tailwind.config.js'),
    },
    autoprefixer: {},
  },
}

*如果不需要自定义Tailwind配置文件路径，可直接简化配置，彻底规避路径相关错误：

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

2. 修复next.config.js配置错误
   现有配置中定义的nextConfig常量未被导出，且未正确配置静态导出的资源前缀，手动用sed替换路径容易遗漏CSS、JS文件内的资源引用。修改为：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  // 配置相对路径前缀，适配Chrome扩展本地文件加载的场景，无需手动替换路径
  assetPrefix: './',
  images: {
    loader: 'akamai',
    path: '',
  },
}

module.exports = nextConfig

修改后可删除build脚本中的sed -i '' -e 's/\/_next/\.\/next/g' out/**.html逻辑，Next.js会自动处理所有静态资源的引用路径。
3. 清理Tailwind 3.x废弃配置
Tailwind CSS 3.x版本默认开启所有样式变体，无需手动配置variants字段，可直接删除tailwind.config.js中的variants配置块精简配置。
4. 确认全局样式引入正确
确保在pages/_app.js/pages/_app.tsx文件顶部正确引入了Tailwind样式入口。如果使用自定义全局CSS文件，需确保文件内包含Tailwind核心指令：

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

修改完成后清空.next、out缓存目录，重新执行npm run build即可正常生成带Tailwind样式的生产构建产物。

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