Next.js 13.4+ 集成 Tailwind CSS 无需手动配置 PostCSS，只需安装 tailwindcss、postcss、autoprefixer（均 -D），运行 npx tailwindcss init 生成配置，在 globals.css 中引入 @tailwind 指令，并确保 content 覆盖所有模板路径且全局 CSS 被正确导入。
Next.js 项目里集成 Tailwind CSS，根本不需要手动配 PostCSS 或写一堆 loader —— 只要版本 ≥13.4，它就自带支持，装对包、写对 content、引对 @tailwind 指令，5 分钟内就能用上。
确认 Next.js 版本与 PostCSS 状态
Next.js 13.4+ 内置 PostCSS，不依赖 postcss.config.js；低于这个版本或手动删过配置，容易出现类名不生效、@tailwind 被忽略等静默失败。
- 运行
npx next --version查版本；若低于 13.4，建议升级，避免隐性兼容问题 - 检查根目录是否存在
postcss.config.js：若存在且非空，优先删掉它 —— Next.js 会 fallback 到内置配置 - 若你确实需要额外插件（如
@tailwindcss/typography），才保留该文件，并只加对应插件项，其余保持空对象：'@tailwindcss/typography': {}
安装依赖与初始化配置
漏装 postcss 或 autoprefixer 是“样式不生效”最常见原因 —— 它们不是可选依赖，而是 Next.js CSS 构建链的必需环节。
- 执行
npm install -D tailwindcss postcss autoprefixer（注意：全部为-D） - 只运行
npx tailwindcss init（不要带-p），它只生成tailwind.config.js，安全可控 - 别装
postcss-cli：Next.js 不走 CLI 流程，装了反而可能干扰内部 loader
配置 content 路径与全局样式注入
content 配错 = Tailwind 扫不到你的类名 = 样式白写了。它必须覆盖所有可能写 className 的文件路径，且格式要和你实际目录结构严格匹配。
立即学习“前端免费学习笔记（深入）”；
- 若用 App Router：
content: ['./app/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}'] - 若用 Pages Router：
content: ['./pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}'] - 在
app/globals.css（或styles/globals.css）顶部写三行：@tailwind base;、@tailwind components;、@tailwind utilities; - 确保该 CSS 文件被
app/layout.tsx显式导入，否则整个 Tailwind 规则不会进打包流程
为什么 Tailwind 类有时“突然失效”？
多数时候不是 Tailwind 本身出问题，而是构建链某个环节断开了。最常踩的坑集中在路径和导入关系上。
-
globals.css被 import 了，但路径写错（比如少了个../），导致样式没加载 - 组件用了
className，但文件没被content匹配到（例如新写了./lib/ui/Button.tsx，却没把./lib/**/*.{js,ts,jsx,tsx}加进content） - 用了
import type导入组件，导致 TS 编译时剔除了className字符串（尤其在条件渲染中），Tailwind 扫不到 - 开发时热更新失效，往往是因为改了
postcss.config.js插件顺序 —— Next.js 对顺序敏感，乱序会中断 JIT 编译
真正容易被忽略的复杂点是：Tailwind 的扫描发生在构建时，而类名字符串必须是静态可分析的。动态拼接（如 className={`text-${size}-sm`}）默认不会被识别，得靠 content 中的 safelist 或 theme.extend 显式声明。
