Next.js 13使用Tailwind样式正常后突然失效并报404错误求助

针对你遇到的「首次页面样式正常，随后样式消失且出现/_next/static/css/app/layout.css 404错误」的问题，试试以下方案：

• 检查Tailwind配置的content路径
  确保tailwind.config.js里的content字段覆盖了Next.js 13的app目录、pages目录及组件目录，避免Tailwind无法扫描到样式使用场景导致生成的CSS文件异常：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./app/**/*.{js,ts,jsx,tsx,mdx}",
      "./pages/**/*.{js,ts,jsx,tsx,mdx}",
      "./components/**/*.{js,ts,jsx,tsx,mdx}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 确认全局样式的导入和指令
  在app/layout.tsx中必须导入全局样式文件：

  import './globals.css'
  

  同时globals.css文件开头要包含Tailwind的核心指令：

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

• 清理Next.js缓存
  缓存异常可能导致静态资源路径错乱，执行以下命令清理缓存后重启服务：

  # macOS/Linux
  rm -rf .next
  npm run dev
  
  # Windows
  rd /s /q .next
  npm run dev
  

• 检查依赖版本兼容性
  确保Next.js与Tailwind CSS版本匹配，Next.js 13推荐使用Tailwind v3.2+，可以锁定兼容版本后重新安装依赖：
  先更新package.json中的依赖版本：

  {
    "dependencies": {
      "next": "^13.4.0",
      "react": "^18.2.0",
      "react-dom": "^18.2.0"
    },
    "devDependencies": {
      "@types/node": "20.2.5",
      "@types/react": "18.2.7",
      "@types/react-dom": "18.2.4",
      "autoprefixer": "^10.4.14",
      "postcss": "^8.4.24",
      "tailwindcss": "^3.3.2",
      "typescript": "5.0.4"
    }
  }
  

  然后执行：

  npm install
  npm run dev
  

• 排查Next.js配置异常
  如果你自定义了next.config.js，检查是否设置了assetPrefix等可能影响静态资源路径的配置，开发环境下建议不要设置assetPrefix，或者确保路径配置正确：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    // 开发环境注释或移除assetPrefix配置
    // assetPrefix: process.env.NODE_ENV === 'production' ? '/your-path' : '',
  }
  
  module.exports = nextConfig
  

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