Next.js 13.4.4启动服务器报错：globals.css解析失败求助

以下是针对你遇到的问题的具体解决步骤：

• 检查Tailwind与PostCSS配置文件
  确保项目根目录存在tailwind.config.js和postcss.config.js，这两个文件是Tailwind在Next.js中编译CSS的核心配置：

  • tailwind.config.js内容示例：

    /** @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: [],
    }
    

  • postcss.config.js内容示例：

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

  如果缺少这两个文件，执行npx tailwindcss init -p快速生成。

• 确认依赖安装完整
  确保安装了Tailwind所需的全部依赖，执行以下命令补装：

  npm install tailwindcss postcss autoprefixer
  

  仅安装Tailwind而缺少PostCSS或Autoprefixer会导致@tailwind指令无法被解析。

• 验证CSS文件的引入与内容
  检查app/globals.css的内容是否正确：

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

  同时确认在app/layout.js（或layout.tsx）中正确引入了该文件：

  import './globals.css';
  
  export default function RootLayout({ children }) {
    return (
      <html lang="zh-CN">
        <body>{children}</body>
      </html>
    );
  }
  

• 清理缓存并重启服务
  停止当前运行的npm run dev进程，删除项目根目录下的.next文件夹：

  rm -rf .next
  

  之后重新执行npm run dev启动服务，避免旧缓存干扰新配置。

• 关于别名配置提示的说明
  终端询问的“Would you like to customize the default import alias?”与当前CSS编译错误无关，这是Next.js初始化时的可选配置项，无论选择Yes或No都不会影响Tailwind的编译，无需为此纠结。

内容的提问来源于stack exchange，提问作者Anand Deep Singh