Next.js 项目中 postcss.config.js 无需手动修改，标准配置仅含 tailwindcss 和 autoprefixer 两个空对象插件；改动易致 Tailwind 类失效或构建报错，因 Next.js 已深度集成并自动调用该配置。
直接说结论：Next.js 项目里 postcss.config.js 不需要手动修改，只要它存在且内容是默认生成的（即只含 tailwindcss 和 autoprefixer 插件），就能正常工作；改它反而容易导致 Tailwind 类不生效或构建报错。
为什么 postcss.config.js 通常不用动
Next.js 内部已深度集成 PostCSS，只要项目中安装了 tailwindcss 和 autoprefixer，并运行过 npx tailwindcss init -p，就会自动生成一个标准的 postcss.config.js。它的作用只是把 Tailwind 的 CSS 处理流程挂进 PostCSS 流水线——而 Next.js 的构建系统会自动识别并调用它。
常见错误现象包括：
- 加了
@tailwind base却没效果 → 实际是globals.css没被正确 import，和postcss.config.js无关 - 修改了
postcss.config.js里插件顺序，结果热更新失效 → Next.js 对插件顺序敏感，乱序会导致 JIT 编译中断 - 手动删掉
postcss.config.js后 Tailwind 仍能工作 → 因为 Next.js 13+ 会 fallback 到内置默认配置
postcss.config.js 的标准内容长什么样
生成后它应该只有这 4 行（无多余注释、无额外插件）：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
关键点：
-
tailwindcss: {}必须是空对象，不能写成tailwindcss: require('tailwindcss')—— Next.js 要求插件以“配置对象”形式注册，否则会报Error: Cannot find module 'tailwindcss' - 不要添加
postcss-import或cssnano等插件 —— Next.js 已内置压缩逻辑，额外引入可能破坏 CSS 提取顺序 - 路径无关：这个文件放在项目根目录即可，Next.js 不读取子目录下的同名文件
哪些情况真得碰它？
极少数真实需求场景下才需微调：
- 你用了
@tailwindcss/typography插件 → 需在postcss.config.js的plugins对象里追加一行：'@tailwindcss/typography': {} - 你在
tailwind.config.js里启用了content的 glob 模式但匹配不到某些文件 → 这其实是tailwind.config.js的问题，不是postcss.config.js的锅 - 你想强制禁用 JIT 模式（不推荐）→ 需在
tailwind.config.js加mode: 'aot'，而非改postcss.config.js
真正容易被忽略的复杂点是：Next.js 的 CSS 处理分两层——PostCSS 负责语法转换，Webpack/Rollup 负责打包提取。改 postcss.config.js 只影响前者，但绝大多数样式问题其实出在后者（比如 app/layout.tsx 里漏了 import './styles/globals.css'）。
