next.js 官方推荐的 tailwind css 集成有三大高频失败原因：postcss.config.js 缺失导致 @tailwind 指令不解析；content 路径未覆盖 app/ 目录致样式丢失；未禁用 preflight 引发样式冲突。
Next.js 官方推荐的 Tailwind CSS 集成方式已经稳定，直接按官方流程走基本不会出错；但实际配置中，postcss.config.js 缺失、content 路径没覆盖 app/ 目录、以及未禁用 preflight 导致样式冲突，是三个最高频的失败原因。
确认 Next.js 版本是否支持 App Router 的 Tailwind 配置
Next.js 13.4+（尤其是使用 app/ 目录）必须在 tailwind.config.js 的 content 字段中显式包含 app/**/*.{js,ts,jsx,tsx}，否则组件内写的类名不会被扫描，热更新也不生效。
旧项目升级后容易漏掉这一项——即使 pages/ 下的文件能正常工作，app/ 下的组件也会“样式丢失”，且控制台无任何报错。
-
content必须同时覆盖app/和components/（或你自定义的 UI 目录） - 如果用了
src/目录结构，路径要写成src/app/**/*.{js,ts,jsx,tsx} - 不建议用
./**/*.tsx这种宽泛写法，会导致构建变慢且可能误扫 node_modules
为什么 postcss.config.js 不可省略？
Next.js 13+ 默认不再自动加载 PostCSS 配置，即使你只用 Tailwind，也必须存在 postcss.config.js 文件，否则 @tailwind 指令不会被解析，globals.css 里写的 @tailwind base; 就只是注释。
最简可用配置如下：
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
注意：tailwindcss 插件不能写成字符串 'tailwindcss'，必须是对象形式，否则 Next.js 14+ 会静默跳过。
globals.css 中的 @layer 顺序影响样式优先级
Tailwind 的 @layer base、@layer components、@layer utilities 必须严格按此顺序书写，否则自定义 @layer utilities 可能被内置工具类覆盖，尤其在你重写 font-size 或 z-index 时表现异常。
典型错误写法：
@layer utilities {
.text-balance { text-wrap: balance; }
}
@layer base { /* ... */ }
正确顺序：
@tailwind base;
@tailwind components;
@tailwind utilities;
<p>@layer base {
h1 { @apply text-2xl; }
}
@layer utilities {
.text-balance { text-wrap: balance; }
}</p>
-
@tailwind指令必须在所有@layer前 - 自定义
@layer base应该放在@tailwind base之后，否则会被重置 - 若用 CSS Modules 或 styled-jsx，
@layer不生效，只能靠!important或更高特异性选择器
开发时样式热更新失效？检查 content 是否包含动态导入路径
Next.js 动态导入（dynamic(() => import(...))）的组件，其文件路径默认不在 content 扫描范围内。如果你把部分 UI 抽到 features/ 或 blocks/ 并用动态方式加载，这些文件里的类名不会触发 HMR，改了也不刷新。
解决方法只有两个：
- 把动态组件的路径加进
tailwind.config.js的content数组（例如features/**/*.{js,ts,jsx,tsx}） - 或者改用常规 import +
React.lazy+Suspense，确保路径可被静态分析
这个点没有文档强调，但一旦遇到“改了 class 名字没反应”，八成卡在这里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
