Next.js 13.4+ 默认内置 PostCSS 支持，无需手动配置；只需安装 tailwindcss、postcss、autoprefixer（均 -D），运行 npx tailwindcss init 生成配置，于 globals.css 中引入 @tailwind 指令并确保正确导入，content 字段需覆盖所有模板路径，且 Tailwind 必须在全局 CSS 中使用。
Next.js 项目里集成 Tailwind CSS，根本不需要手动折腾 PostCSS 配置 —— 官方早已内置支持，postcss 和 autoprefixer 会自动加载，你只需装对包、配对文件、引对指令，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 配置 - 若你明确需要自定义插件（如
postcss-px-to-viewport-8-plugin），才必须保留该文件并显式声明所有插件
安装 Tailwind 及其官方依赖
不要只装 tailwindcss —— Next.js 的 CSS 处理链依赖完整的 PostCSS 工具链，漏掉任一环都会导致构建时静默失败或样式丢失。
- 执行：
npm install -D tailwindcss postcss autoprefixer - 注意：
postcss必须是开发依赖（-D），Next.js 构建阶段会读取它，但运行时不需要 - 别装
postcss-cli：Next.js 不走 CLI 流程，装了反而可能干扰内部 loader - 如果项目已用
@tailwindcss/typography或@tailwindcss/forms，也统一加-D安装，它们本质是 PostCSS 插件
初始化 Tailwind 配置并注入全局样式
npx tailwindcss init -p 这条命令在 Next.js 里其实是“半废弃”的 —— 它会生成 tailwind.config.js 和 postcss.config.js，但后者对现代 Next.js 反而是冗余甚至有害的。
立即学习“前端免费学习笔记（深入）”；
- 只运行
npx tailwindcss init（去掉-p），它仅生成tailwind.config.js，安全可控 - 在
app/globals.css（或styles/globals.css，取决于你是否用 App Router）顶部加入：@tailwind base;<br>@tailwind components;<br>@tailwind utilities;
- 确保该 CSS 文件被
app/layout.tsx或pages/_app.tsx显式导入，否则 Tailwind 规则不会进入打包流程 - 若使用 App Router，
layout.tsx中应有import '../styles/globals.css'；路径错误会导致热更新不触发、样式不刷新
验证是否生效及常见静默失败点
Tailwind 集成失败时，往往没有报错，只是页面空白或类名无效 —— 这通常是因为 PostCSS 插件链断在了某个环节。
- 在任意组件中写
className="text-blue-500 bg-red-200"，保存后检查浏览器开发者工具 Elements 面板：若 class 存在但无样式，说明 Tailwind CSS 未注入；若 class 根本没渲染，说明 JSX 或导入路径出错 - 检查
tailwind.config.js中的content字段是否覆盖所有模板路径，例如：content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"]—— 路径遗漏会导致 PurgeCSS 清掉所有类 - 若用了
postcss.config.js，务必确认其中插件顺序：tailwindcss必须在autoprefixer之前，否则前缀无法添加到生成的工具类中 - 修改
tailwind.config.js后需重启开发服务器（ctrl+c→npm run dev），HMR 不会监听配置文件变更
最易被忽略的是：Next.js 的 PostCSS 支持只作用于 .css 文件，不处理 .module.css 或 styled-jsx 中的 @tailwind 指令 —— 所有 Tailwind 入口必须走全局 CSS 文件，且该文件不能是模块化样式。
