不能在 _app.tsx 直接 import tailwind css，因其 tailwind.css 是含 @tailwind 指令的 postcss 源文件，须经编译才能生成有效样式；正确做法是通过 globals.css（含三行 @tailwind 指令）在 app/layout.tsx 中引入，并确保 postcss.config.js 与 tailwind.config.js 配置正确且协同工作。
为什么不能在 _app.tsx 里直接 import Tailwind CSS？
Next.js 默认会把 _app.tsx 作为所有页面的入口，但 Tailwind 的 CSS 文件（如 tailwind.css）本质是带 @layer、@tailwind 指令的 PostCSS 输入源，不是普通 CSS —— 它必须由 Tailwind CLI 或 PostCSS 插件编译成实际样式规则，否则浏览器根本不会识别 @tailwind base 这类指令。直接 import './tailwind.css' 只会让未编译的源码进 bundle，最终页面无任何 Tailwind 类生效。
正确做法：通过 globals.css + app/layout.tsx 引入
Next.js 13+ App Router 要求全局样式必须注入到根 layout.tsx 的 中，且只能走 CSS Module 或全局 CSS 文件路径。标准流程是：
-
app/layout.tsx中import '../styles/globals.css'（注意路径必须从app/目录向上回溯） -
styles/globals.css内容必须包含三行核心指令：@tailwind base;<br>@tailwind components;<br>@tailwind utilities;
- 确保
tailwind.config.js的content字段已正确配置，例如：content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}']
如果用的是 Pages Router（pages/_app.tsx），则仍需在 pages/_app.tsx 中 import '../styles/globals.css'，但该文件内容不变 —— 关键仍是编译阶段处理，不是运行时加载。
常见报错及对应修复
遇到样式不生效，先检查这些典型信号：
- 控制台报错
Cannot find module './styles/globals.css'→ 路径写错，确认styles目录和app/layout.tsx的相对位置 - Tailwind 类名（如
text-blue-500）完全没效果，但自定义 CSS 生效 →globals.css里漏了@tailwind utilities，或tailwind.config.js的content没覆盖到你写的 JSX 文件路径 - 开发时生效、build 后失效 →
next build阶段未触发 Tailwind 编译，检查postcss.config.js是否存在且含tailwindcss插件
别忽略 postcss.config.js 和 tailwind.config.js 的联动
Tailwind 不是独立运行的，它依赖 PostCSS 管道。缺一不可：
-
postcss.config.js必须导出{ plugins: { tailwindcss: {}, autoprefixer: {} } } -
tailwind.config.js的content必须显式列出所有可能用到 Tailwind 类的文件路径（支持 glob，但不支持动态 import 或运行时拼接） - 修改
tailwind.config.js后，需重启 dev server（next dev），热更新不感知配置变更
最常被跳过的点：以为装了 tailwindcss 包就完事，其实 postcss 和配置文件的协同才是生效前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
