Next.js 13.4+ 内置 PostCSS，无需手动配置；只需安装 tailwindcss、postcss、autoprefixer，运行 npx tailwindcss init，配置 content 路径，于 globals.css 顶部写入三行 @tailwind 指令并确保被 layout.tsx 正确引入。
Next.js 13.4+ 项目里引入 Tailwind CSS，根本不需要手动配 PostCSS —— 它已内置支持，你只管装对包、写对配置、引对文件，5 分钟内就能生效。
确认 Next.js 版本并清理冗余配置
低于 13.4 的版本（如 13.0–13.3）可能因 PostCSS 配置不一致导致 @tailwind 指令被忽略、类名不生成；高于该版本则默认启用 JIT + 内置 PostCSS，postcss.config.js 反而容易干扰。
- 运行
npx next --version确认版本；若低于 13.4，建议升级 - 检查根目录是否存在
postcss.config.js：若存在且非空，直接删掉它（Next.js 会 fallback 到内置配置） - 仅当你需要额外 PostCSS 插件（如
@tailwindcss/typography）时，才保留该文件并显式声明所有插件
安装依赖与初始化配置
漏装 postcss 或 autoprefixer 是静默失效的最常见原因 —— 构建不报错，但样式完全不出现。
- 执行
npm install -D tailwindcss postcss autoprefixer（三者都必须是-D） - 不要装
postcss-cli：Next.js 不走 CLI 流程，装了反而可能覆盖内部 loader - 运行
npx tailwindcss init（**不要加-p**），它只生成tailwind.config.js，安全可控 - 在
tailwind.config.js的content字段中，确保覆盖所有模板路径，例如：['app/**/*.{js,ts,jsx,tsx}', 'components/**/*.{js,ts,jsx,tsx}']
在全局 CSS 中注入并确保正确导入
@tailwind base、@tailwind components、@tailwind utilities 这三行指令必须出现在全局 CSS 文件顶部，且该文件必须被 layout.tsx 或 _app.tsx 显式 import，否则整个 Tailwind 规则都不会进入打包流程。
- 编辑
app/globals.css（App Router）或styles/globals.css（Pages Router），在最上方加入三行@tailwind指令 - 在
app/layout.tsx中确认有类似import '../app/globals.css'的语句（注意路径是否匹配，路径错误会导致热更新不触发、样式不刷新） - 避免把
@tailwind放进局部 CSS 模块（.module.css）或style标签里 —— 它们不参与 PostCSS 处理链
常见失效现象与快速排查点
类名写了但没效果？不是 Tailwind 问题，大概率是构建链某个环节断了。DevTools 里看不到对应 CSS 规则，就说明没生成；能看到但没应用，才是优先级或作用域问题。
-
md:grid-cols-2不生效 → 检查content是否包含app/**/*.{ts,tsx}，JIT 模式下未出现在模板中的响应式类不会生成 - 热更新后样式没变 → 先确认
globals.css是否被 layout 正确 import，再检查文件路径大小写（Linux/macOS 区分大小写） - 部分类名能用、部分不能（如
bg-red-500可用但text-emerald-400不可用）→ 查tailwind.config.js的theme.extend.colors是否覆盖了默认色板 - 使用 App Router 时
@layer自定义样式不生效 → 确保自定义规则写在globals.css中，且包裹在@layer base/components/utilities块内
真正容易被忽略的复杂点是：Tailwind 的 class 名生成完全依赖 content 路径扫描，而不是“写了就能用”。哪怕你只漏了一个 components/Card.tsx，里面写的 hover:scale-105 就永远不会出现在最终 CSS 里 —— 它不是 bug，是设计使然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
