Next.js（appDir）中Tailwind添加自定义颜色后失效求助

问题描述 #

我在启用appDir实验特性的Next.js项目中使用Tailwind CSS，给tailwind.config.js添加自定义颜色集后，部分元素的Tailwind类突然失效，但仍有部分类能正常工作。全局CSS已包含@tailwind base; @tailwind components; @tailwind utilities;且已在layout中导入，此前项目运行完全正常。

移除自定义颜色配置后问题并未解决，先后尝试npm run dev -- --no-cache、删除.next目录、移动项目文件夹等操作均无效。直到删除所有Tailwind配置文件并重新安装后，所有Tailwind类彻底失效。

当前相关配置：

• tailwind.config.js：

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• postcss.config.js：

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

• package.json中Tailwind版本："tailwindcss": "^3.2.4"

排查修复步骤 #

• 修正tailwind.config.js的content路径：启用appDir后，项目新增了app/目录，当前配置未包含该目录，导致app目录下的组件无法被Tailwind扫描到。修改content字段：

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}", // 新增app目录扫描规则
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• 确认全局CSS的位置与导入：appDir模式下，全局CSS必须放在app/globals.css，并且在app/layout.js中导入。检查文件路径是否正确，layout中的导入语句是否为import './globals.css'。

• 彻底清理依赖缓存：执行以下命令重新安装依赖：

rm -rf node_modules
rm package-lock.json
npm cache clean --force
npm install

• 检查Next.js版本兼容性：Tailwind 3.2.4需要Next.js 12.2及以上版本支持appDir，若你的Next.js版本过低，执行升级命令：

npm install next@latest

• 验证PostCSS配置文件名：确保配置文件名为postcss.config.js且放在项目根目录，避免文件名错误导致配置不生效。

• 重启服务并强制刷新浏览器：重新执行npm run dev启动服务，然后在浏览器中按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，清除浏览器缓存。

内容的提问来源于stack exchange，提问作者Moh3n.As