Next.js中Tailwind不生效主因是postcss.config.js冲突、content路径漏配或全局CSS未正确导入；13.4+需删postcss.config.js、content须覆盖所有组件路径、globals.css必须在layout.tsx或_app.tsx中导入。
Tailwind CSS 在 Next.js 项目里不生效，90% 是因为 postcss.config.js 冲突、content 路径漏配、或全局 CSS 没被正确导入 —— 不是 Tailwind 本身有问题，而是构建链里某一个环节“断了”。
Next.js 13.4+ 不要手动写 postcss.config.js
新版 Next.js（13.4 及以上）内置 PostCSS，自动加载 tailwindcss 和 autoprefixer 插件。如果你手动生成过 postcss.config.js（比如用了 npx tailwindcss init -p），它反而会覆盖内置配置，导致 @tailwind 指令被忽略、类名不生成。
- 运行
npx next --version确认版本；低于 13.4 建议升级 - 删掉根目录下的
postcss.config.js（哪怕它是空的） - 只保留
tailwind.config.js，且确保里面没写plugins: []或手动引入tailwindcss插件 - 装包命令必须是
npm install -D tailwindcss postcss autoprefixer—— 少任何一个，构建时都可能静默失败
content 字段必须覆盖所有用到 className 的路径
Tailwind 不是实时监听文件，而是在构建时扫描 content 列表里的文件，提取类名并生成对应 CSS。路径写错、漏写、或用了错误 glob 语法，就会导致你写的 bg-blue-500 等类完全不出现在最终 CSS 里。
- App Router 项目：必须包含
"./app/**/*.{js,ts,jsx,tsx,mdx}" - Pages Router 项目：必须包含
"./pages/**/*.{js,ts,jsx,tsx,mdx}" - 共用组件：加一行
"./components/**/*.{js,ts,jsx,tsx,mdx}" - 别写成
"./src/**/*"—— Next.js 默认不把src当根目录，除非你显式配置了srcDir - 如果用了 MDX 或自定义扩展名（如
.client.tsx），得手动加进去，否则类名不会被扫描
全局 CSS 必须在 layout.tsx 或 _app.tsx 中导入
Tailwind 的 @tailwind base 等指令只在被 Webpack/Next.js 构建系统实际处理的 CSS 文件中起作用。如果 globals.css 没被任何入口文件 import，整个 Tailwind 样式链就断了 —— 页面上什么都不会变。
立即学习“前端免费学习笔记（深入）”；
- App Router：检查
app/layout.tsx顶部是否有import '../styles/globals.css'（路径必须和实际文件位置一致） - Pages Router：检查
pages/_app.tsx是否 import 了全局 CSS - 路径写错（比如少个
../或多了一层src）会导致热更新失效、样式不刷新，但控制台无报错 - 不要在单个组件里 import
globals.css—— 它必须是全局唯一入口，否则可能重复注入或冲突
VS Code 报 @tailwind 未知规则？不是错误，是编辑器问题
VS Code 的内置 CSS 校验器不认识 @tailwind 这类 PostCSS 指令，所以会标红提示 Unknown at rule @tailwindcss。这不影响构建和运行，只是编辑器提示。
- 装官方扩展
Tailwind CSS IntelliSense，它能提供类名补全和实时校验 - 不用关掉 VS Code 的 CSS 校验，也不用改
settings.json屏蔽该警告 —— 它只是“看起来吓人”，实际编译完全不受影响 - 真正要盯的是浏览器开发者工具里有没有生成对应 CSS 规则，而不是编辑器里有没有红线
最常被忽略的点：改完 tailwind.config.js 或 globals.css 后，必须重启开发服务器（ctrl+c 再 npm run dev），否则新配置不会生效 —— Next.js 不会热重载这些配置文件。
