NextJS 13中使用路由分组导致Tailwind样式失效问题排查

原因1：全局样式未在新布局中导入 #

把原根目录的layout.tsx移到(app)路由分组后，这个新布局如果没导入Tailwind全局样式文件（通常是src/app/globals.css），页面就无法加载Tailwind的基础样式和工具类。

解决方法： #

在src/app/(app)/layout.tsx中添加全局样式导入：

import '../globals.css'; // 根据实际文件路径调整，确保指向正确的globals.css

export default function AppLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

原因2：Tailwind缓存未更新 #

Tailwind的JIT编译器有时不会自动检测到路由分组目录的文件变化，导致样式未生成。

解决方法： #

• 重启NextJS开发服务器：停止当前npm run dev进程后重新启动。
• 手动清除缓存：删除项目根目录下的.next文件夹，再重新启动开发服务器。

配置验证说明 #

你的tailwind.config.ts中content配置是正确的，./src/app/**/*.{js,ts,jsx,tsx,mdx}会递归匹配app目录下所有子目录（包括带括号的(app)分组）中的文件，无需修改该配置。

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