Next.js 13.4版本中Tailwind CSS的PostCSS插件配置问题求助

阿华AIGC实验室

2026-4-2

我来帮你快速解决这个问题！这个错误提示其实已经把核心原因和解决方向说透了——Tailwind CSS的PostCSS插件现在已经从主tailwindcss包中拆分出来，变成了独立的@tailwindcss/postcss包，Next.js 13.4对依赖的校验更严格，所以咱们按下面的步骤调整就能搞定：

第一步：安装独立的PostCSS插件包

打开终端，在你的Next.js项目根目录下执行对应包管理器的安装命令：

使用npm：

npm install @tailwindcss/postcss --save-dev

使用Yarn：
```
yarn add @tailwindcss/postcss --dev
```
使用pnpm：
```
pnpm add @tailwindcss/postcss -D
```

第二步：更新PostCSS配置文件

找到项目根目录下的postcss.config.js（如果没有这个文件，直接新建一个），把原来配置中引用的tailwindcss替换成@tailwindcss/postcss。配置文件示例如下：

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {}, // 这个插件是Next.js项目的常用依赖，记得保留
  },
}

第三步：确认Tailwind CSS配置文件的正确性

检查你的tailwind.config.js，确保它正确包含了项目中需要应用Tailwind样式的所有文件路径，尤其是Next.js 13.4主推的App Router目录。示例配置参考：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // App Router下的所有文件
    './pages/**/*.{js,ts,jsx,tsx,mdx}', // Pages Router下的所有文件
    './components/**/*.{js,ts,jsx,tsx,mdx}', // 公共组件目录
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}