Next.js中内联Tailwind工具类不生效是什么原因？

以下是针对你使用的Next.js 12 + Tailwind CSS 2.2.16环境的常见原因及修复方法：

• tailwind.config.js 中 purge 配置路径不全
  Tailwind 2.x 通过 purge 配置扫描项目中使用工具类的文件，写在CSS文件中的@apply规则会在构建时直接生成对应样式，不会被purge逻辑过滤，但内联在jsx/tsx、html等文件里的工具类如果不在扫描路径内，会被当作未使用样式在构建阶段移除。
  典型的Next.js项目配置参考：

// tailwind.config.js
module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  mode: 'jit', // 若开启JIT模式需要保留该配置
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

注意不要手动在开发环境开启purge.enabled: true，保持默认即可，Tailwind会自动根据NODE_ENV判断是否开启样式裁剪。

• 全局CSS引入顺序错误
  需要保证Tailwind的三层指令放在自定义样式之前，否则自定义样式可能覆盖内置工具类，或者出现优先级异常。正确的全局CSS结构如下：

/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 所有带@apply的自定义样式放在下方 */
.custom-btn {
  @apply px-4 py-2 rounded bg-blue-500 text-white;
}

同时确认你仅在_app.js中引入了这一个全局CSS文件，没有重复引入或者顺序颠倒。

• PostCSS配置异常
  检查根目录下的postcss.config.js是否符合标准配置，不要添加会冲突的PostCSS插件：

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

• 开发环境缓存问题
  Windows环境下Next.js的构建缓存偶尔会导致Tailwind样式不生效，可以清除缓存后重启开发服务：

# Windows cmd 执行
rmdir /s /q .next
npm run dev

# PowerShell 执行
Remove-Item .next -Recurse -Force
npm run dev

• 自定义类名与内置工具类重名
  如果你的自定义CSS中存在和Tailwind内置工具类同名的类，且写在@tailwind utilities之后，会覆盖内置样式，重命名自定义类或者调整代码顺序即可解决。

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