Next.js 13中Tailwind样式修改需刷新才生效的问题排查求助

我用Next.js 13新建了项目，按以往方式集成Tailwind CSS后，修改样式无法即时生效，必须刷新整个页面才能看到变化。以下是我的配置文件和依赖信息，请帮忙排查：

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./layout/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
// 此处省略自定义配置
    },
  },
  plugins: [],
}

.babelrc #

{
    "presets": ["next/babel"],
    "plugins": []
  }

globals.css #

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

已在_app.tsx中通过import '../styles/globals.css'引入该全局样式文件。

依赖信息 #

"dependencies": {
    "@react-google-maps/api": "^2.13.1",
    "@types/node": "18.11.9",
    "@types/react": "18.0.24",
    "@types/react-dom": "18.0.8",
    "axios": "^1.1.3",
    "eslint": "8.26.0",
    "eslint-config-next": "13.0.2",
    "next": "13.0.2",
    "react": "18.2.0",
    "react-circular-progressbar": "^2.1.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.6.0",
    "react-query": "^3.39.2",
    "react-toastify": "^9.1.1",
    "typescript": "4.8.4"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.18",
    "tailwindcss": "^3.2.1"
  }

排查修复步骤 #

1. 适配Next.js 13路由规则
   Next.js 13默认启用App Router，若同时使用Pages Router，可调整tailwind.config.js的content配置覆盖更多场景：

   content: [
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./layout/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   

2. 移除冗余Babel配置
   Next.js 13自带的编译规则已完全兼容Tailwind CSS，自定义.babelrc可能干扰热更新逻辑，建议直接删除该文件。

3. 调整全局样式引入位置
   若使用App Router，全局样式需在app/layout.tsx中引入；混合路由模式下，确保pages/_app.tsx和app/layout.tsx都正确引入globals.css。

4. 升级依赖版本
   Next.js 13.0.2属于早期版本，存在热更新相关bug。执行命令升级到稳定版：

   npm install next@latest eslint-config-next@latest
   npm install tailwindcss@latest postcss@latest autoprefixer@latest
   

5. 清除缓存重启服务
   执行以下命令清理缓存后重启开发服务：

   rm -rf .next node_modules package-lock.json
   npm install
   npm run dev
   

6. 检查PostCSS配置
   确保项目根目录存在postcss.config.js，内容如下：

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

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