Next.js 13.4+ 默认内置 PostCSS 支持，无需手动配置 postcss.config.js；只需安装 tailwindcss、postcss、autoprefixer（-D），运行 npx tailwindcss init 生成配置，正确导入 globals.css 并设置 content 路径即可生效。
Next.js 项目里集成 Tailwind CSS，根本不需要手动折腾 PostCSS 配置 —— 官方早已内置支持，你只需装对包、配对文件、引对指令，5 分钟内就能跑起来。
确认 Next.js 版本是否自带 PostCSS 支持
Next.js 13.4+（含 App Router）默认启用 PostCSS，且不依赖用户手写 postcss.config.js。低于这个版本（如 13.0–13.3）可能触发“Tailwind 类名不生效”“@tailwind 指令被忽略”等现象。
- 运行
npx next --version确认版本；低于 13.4 建议升级，避免隐性兼容问题 - 检查项目根目录是否存在
postcss.config.js：若存在且内容非空，优先删掉它 —— Next.js 会自动 fallback 到内置配置 - 只有明确需要自定义插件（如
postcss-px-to-viewport-8-plugin）时，才必须保留该文件并显式声明所有插件
安装依赖与生成核心配置
漏掉任一环都可能导致构建静默失败或样式丢失。注意：Next.js 构建阶段读取 postcss，但运行时不需它，所以必须用 -D 安装。
- 执行：
npm install -D tailwindcss postcss autoprefixer - 别装
postcss-cli：Next.js 不走 CLI 流程，装了反而可能干扰内部 loader - 只运行
npx tailwindcss init（去掉-p参数），它仅生成tailwind.config.js，安全可控 - 若已用
@tailwindcss/typography或@tailwindcss/forms，也统一加-D安装
确保 @tailwind 指令被正确加载
加了 @tailwind base 却没效果？大概率不是配置问题，而是 globals.css 没被正确 import，或者路径没覆盖到组件文件。
- 在
app/globals.css（App Router）或styles/globals.css（Pages Router）顶部加入：@tailwind base; @tailwind components; @tailwind utilities; - 确保该 CSS 文件被
app/layout.tsx或pages/_app.tsx显式导入，否则 Tailwind 规则不会进入打包流程 - 检查
tailwind.config.js的content字段是否覆盖所有模板路径，例如：['./app/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}']
为什么改 postcss.config.js 反而容易出错
Next.js 的 CSS 处理分两层：PostCSS 负责语法转换，Webpack/Rollup 负责打包提取。手动改它，等于绕过官方流水线。
-
tailwindcss: {}必须是空对象，不能写成tailwindcss: require('tailwindcss')，否则报Error: Cannot find module 'tailwindcss' - 不要添加
postcss-import或cssnano等插件 —— Next.js 已内置压缩逻辑，额外引入可能破坏 CSS 提取顺序 - 插件顺序乱了会导致热更新失效：Next.js 对
plugins对象的键序敏感，JIT 编译可能中断 - 路径无关：这个文件只认项目根目录下的
postcss.config.js，子目录同名文件完全被忽略
真正容易被忽略的复杂点是：Tailwind 是否生效，90% 以上取决于 content 路径是否扫到你的 JSX/TSX 文件，而不是 postcss.config.js 写得有多“完整”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
