Next.js 14新项目运行npm run dev出现CSS模块解析失败错误

错误原因 #

项目缺少Tailwind CSS的PostCSS配置，Webpack无法识别@tailwind这类Tailwind专属指令，导致解析失败。

解决步骤 #

• 安装Tailwind及相关依赖（如果创建项目时未勾选Tailwind选项）：

  npm install -D tailwindcss postcss autoprefixer
  

• 初始化Tailwind配置文件（自动生成tailwind.config.js和postcss.config.js）：

  npx tailwindcss init -p
  

• 修改tailwind.config.js，确保content字段包含你的项目文件路径：

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

• 确认src/app/globals.css中的Tailwind指令无误：

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

• 重启开发服务器：

  npm run dev
  

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