Next.js集成Tailwind编译报错：Expected a backslash preceding the semicolon

执行npm run dev时出现如下错误：

error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[2]!./styles/global.css
Error: Expected a backslash preceding the semicolon.
at resolveMatches.next ()
at Function.from ()
at runMicrotasks ()
Import trace for requested module:
./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[9].use[2]!./styles/global.css
./styles/global.css

严格按照Tailwind官方指南完成安装，后续未修改配置。global.css仅包含三行Tailwind指令：

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

项目配置文件如下：

package.json #

{
  "name": "skillsboardai",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.8",
    "@heroicons/react": "^2.0.14",
    "i18next": "^22.4.9",
    "i18next-browser-languagedetector": "^7.0.1",
    "i18next-http-backend": "^2.1.1",
    "next": "^13.1.6",
    "next-i18next": "^13.0.3",
    "openai": "^3.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-i18next": "^12.1.4"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "eslint": "8.33.0",
    "eslint-config-next": "13.1.6",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.4"
  }
}

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}",
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js #

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

_app.js #

import React from 'react'
import '../styles/global.css'
import { appWithTranslation } from 'next-i18next';

function App({ Component, pageProps }) {
    return <Component {...pageProps} />;
  }

export default appWithTranslation(App);

已尝试以下方法均无效：

• 移除Tailwind：项目正常运行，但无法使用Tailwind
• 清空global.css：项目正常运行，但无法使用Tailwind
• 删除组件中所有Tailwind类：无效
• 删除.next文件夹并重新生成：无效
• 删除node_modules并重新安装：无效
• 回滚至最后一个可正常运行的提交：仍无效

1. 排查CSS文件中的隐藏特殊字符 #

错误提示指向分号格式问题，大概率是global.css中存在不可见的特殊字符（如全角分号、零宽空格）：

• 用纯文本编辑器打开global.css，开启“显示控制字符”功能（VS Code可通过Ctrl+Shift+P搜索Toggle Render Whitespace），检查分号前后是否有异常字符。
• 手动重新输入三行Tailwind指令，避免复制粘贴引入的隐藏格式问题。

2. 升级依赖版本解决兼容性问题 #

当前使用的Next.js 13.1.6与Tailwind 3.2.4存在已知的css-loader语法解析bug，升级依赖可修复：

• 修改package.json中的依赖版本：

  "dependencies": {
    "next": "^13.4.0"
  },
  "devDependencies": {
    "tailwindcss": "^3.3.0",
    "postcss": "^8.4.24",
    "autoprefixer": "^10.4.14"
  }
  

• 执行npm install更新依赖，删除.next文件夹后重新启动项目。

3. 明确PostCSS语法配置 #

在postcss.config.js中添加语法声明，避免解析歧义：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
  syntax: 'postcss-scss'
}

执行npm install postcss-scss --save-dev安装对应依赖后重启项目。

4. 调整Webpack CSS加载配置 #

在next.config.js中添加自定义Webpack规则，禁用可能冲突的CSS加载选项：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.module.rules.forEach(rule => {
      if (rule.oneOf) {
        rule.oneOf.forEach(oneOfRule => {
          if (oneOfRule.test && oneOfRule.test.toString().includes('css')) {
            oneOfRule.use.forEach(use => {
              if (use.loader && use.loader.includes('css-loader')) {
                use.options = { ...use.options, url: false, sourceMap: false }
              }
            })
          }
        })
      }
    })
    return config
  }
}

module.exports = nextConfig

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