NextJS 12开启实验性功能时TailwindCSS无法正常生效问题求助

问题根因 #

你遇到的是Next.js 12.0.1版本的已知兼容性bug：开启concurrentFeatures和serverComponents两个实验特性后，开发环境的PostCSS增量加载逻辑和Tailwind CSS 2.x的默认AOT编译模式冲突，导致样式无法正常注入。生产构建时会走全量样式编译流程，不会触发该逻辑缺陷，所以生产包运行正常。

解决方案 #

方案1：升级依赖版本（最推荐）

官方在Next.js 12.0.4及后续12.x稳定版中修复了该兼容问题，直接升级Next.js版本即可：

npm install next@12.0.4
# 或使用yarn
yarn add next@12.0.4
# 或使用pnpm
pnpm add next@12.0.4

如果可以同步升级工具链，建议将Tailwind升级到3.x版本，3.x默认启用JIT编译模式，和Next.js实验特性的兼容性更好，升级后只需在tailwind.config.js中补充content配置项指定扫描路径即可。

方案2：保留当前版本的临时兼容配置

如果不想变更现有依赖版本，可通过以下配置修复：

1. 在tailwind.config.js中手动开启JIT编译模式，指定文件扫描路径：

module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
  // 保留你原有的其他配置
}

2. 修改_app.js中的全局样式引入逻辑，直接引入Tailwind的预构建样式，替代自定义的global.css：

// pages/_app.js
import 'tailwindcss/tailwind.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

3. 删除项目根目录下的.next缓存文件夹，重启开发服务即可生效。

方案3：临时禁用实验性CSS加载器

如果以上方案都不适用，可在启动开发服务时添加环境变量，临时禁用实验性CSS加载器，不会影响生产构建的配置：

DISABLE_EXPERIMENTAL_CSS_LOADER=1 npm run dev

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