Next.js 13.4+ 无需手动配置 postcss.config.js，应直接删除；content 必须显式包含所有 JSX/TSX/MDX 路径；@tailwind 指令需在 globals.css 中且被 layout.tsx 正确导入；依赖须安装 tailwindcss、postcss、autoprefixer（均 -D）。
Next.js 13.4+ 根本不需要手动写 postcss.config.js
现代 Next.js（13.4 及以上）已内置 PostCSS 支持，postcss.config.js 不仅非必需，反而容易引发冲突。常见现象是：类名不生效、@tailwind 指令被忽略、构建时无报错但样式全丢。
检查方式：npx next --version 确认版本；再看项目根目录是否存在非空的 postcss.config.js —— 若存在且你没主动加过自定义插件（比如 postcss-px-to-viewport），直接删掉它。
Next.js 会自动加载 tailwindcss 和 autoprefixer 插件，前提是它们已作为开发依赖安装。手动配置只会覆盖默认行为，导致 JIT 编译失效或 content 扫描路径被忽略。
content 字段必须覆盖所有 JSX/TSX 文件路径
Tailwind 的“按需生成”依赖 content 配置精准扫描模板文件。漏掉路径 = 对应组件里的类名不会被提取，最终 CSS 里压根没有那条规则。
立即学习“前端免费学习笔记（深入）”；
典型错误写法：content: ["./pages/**/*.{js,ts}"] —— 忽略了 .jsx、.tsx，也漏掉 app/ 或 components/ 目录。
推荐写法（App Router 项目）：
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/**/*.{js,ts,jsx,tsx,mdx}"
]
注意点：
- 路径用双引号，通配符用
{js,ts,jsx,tsx,mdx}显式列出，别偷懒写* - 若用了
src/目录结构，必须加进去，Next.js 不会自动推断 - MDX 文件也要包含，否则用
@tailwind的文章页样式会丢失
@tailwind 指令必须在全局 CSS 中且被 layout 显式导入
把 @tailwind base; 等三行指令写进 app/globals.css 只是第一步。真正关键的是：这个文件必须被 app/layout.tsx（或 pages/_app.tsx）导入，否则整个 Tailwind 的 CSS 规则根本进不了打包流程。
常见疏忽：
- 写了
globals.css，但忘记在layout.tsx里import '../app/globals.css' - 路径写错，比如
import './globals.css'（少了一级../） - 在
layout.tsx里用了dynamic导入，导致 CSS 被当作客户端资源延迟加载
务必确认 import 语句出现在 layout.tsx 顶部，且路径与文件实际位置一致。
安装命令和依赖顺序不能错
只运行 npm install -D tailwindcss 是不够的。Next.js 构建链需要完整的 PostCSS 工具链，缺一不可。
正确命令：
npm install -D tailwindcss postcss autoprefixer
关键细节：
-
postcss必须是-D（开发依赖），运行时不需要它，但构建阶段必须可 require - 不要装
postcss-cli：Next.js 不走 CLI 流程，它会干扰内部 loader，导致 CSS 解析失败 - 如果用了
@tailwindcss/forms或@tailwindcss/typography，也必须加-D安装，它们是 PostCSS 插件，不是运行时库
初始化只需 npx tailwindcss init（不带 -p），它只生成 tailwind.config.js，干净安全。带 -p 会多建一个有害的 postcss.config.js，2026 年已成过时操作。
最易被忽略的一点：Tailwind 的 JIT 编译器在开发时是实时监听文件的，但它的扫描起点完全取决于 content 配置 —— 写错路径，连热更新都救不了你。
