Next.js新项目Tailwind CSS加载失败：@符号解析错误求助

1. 修正globals.css的语法 #

你的错误源于全局样式文件中@import的使用方式不符合Tailwind的预期配置。将globals.css内容替换为Tailwind官方推荐的指令写法：

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

不要用 @import 'tailwindcss/base';这类普通CSS导入语句——Next.js的默认CSS解析器无法直接识别这种导入Tailwind内部文件的写法，必须使用Tailwind提供的@tailwind指令。

2. 验证根布局的样式导入 #

确保layout.js（App Router）或_app.js（Pages Router）正确引入了globals.css，路径不能出错：

// app/layout.js
import './globals.css'; // 确认路径与文件位置匹配

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

3. 检查tailwind.config.js的内容路径 #

Tailwind需要知道哪些文件里用到了它的类名，确保配置文件的content字段覆盖了所有页面、组件目录：

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

4. 确认next.config.mjs无冲突配置 #

Next.js 13+创建的项目不需要额外配置CSS解析，确保你的next.config.mjs是干净的默认配置：

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default nextConfig;

不要添加禁用CSS模块或修改解析规则的配置，否则会干扰Tailwind的正常工作。

5. 修复依赖版本不兼容问题 #

Next.js 13+要求Tailwind CSS v3.x及以上，执行以下命令检查并更新依赖：

# 查看当前版本
npm list next tailwindcss postcss autoprefixer

# 更新到最新兼容版本
npm install next@latest tailwindcss@latest postcss@latest autoprefixer@latest

6. 清理缓存重新启动 #

缓存问题也可能导致解析错误，执行以下步骤重置项目：

# 删除缓存和依赖文件
rm -rf .next node_modules package-lock.json

# 重新安装依赖并启动
npm install
npm run dev

如果以上步骤无法解决问题，请提供你的globals.css、tailwind.config.js和package.json的完整代码，以便进一步排查。

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