Next.js 13.4+支持App Router下自动识别tailwind.config.ts，但需确保已安装typescript和@types/node，否则会静默跳过；推荐使用tailwind.config.js以避免兼容问题。
确认 Next.js 版本是否支持 App Router 的 tailwind.config.ts 自动配置
Next.js 13.4+（尤其是使用 App Router 时）会尝试自动读取 tailwind.config.ts，但实际生效依赖于配置文件是否被正确识别。如果你用的是 tailwind.config.js，它也能工作；但若你手动创建了 tailwind.config.ts 却没装 typescript 或 @types/node，next dev 可能静默跳过加载，样式不生效且无报错。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 运行
npx tailwindcss init -p生成基础配置 —— 它默认创建tailwind.config.js，最稳妥 - 如果坚持用 TS 配置，确保项目已安装
typescript和@types/node，否则tailwindcssCLI 无法解析tailwind.config.ts - 检查
tailwind.config.js中的content字段是否包含./app/**/*.{js,ts,jsx,tsx}（App Router）或./pages/**/*.{js,ts,jsx,tsx}（Pages Router）—— 漏掉路径会导致 class 不被扫描，热更新后样式消失
在 App Router 中全局注入 Tailwind 的 CSS 必须放在 app/layout.tsx 的 head 里
很多人把 @tailwind base; 等语句写进普通组件的 style 标签，或试图用 import 'tailwindcss/base'，这完全无效。Tailwind 的三段式指令（base / components / utilities）必须由 PostCSS 在构建期处理，不能运行时注入。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
app/layout.tsx顶部添加import '../styles/globals.css'（或任意你存放@tailwind指令的 CSS 文件） - 该 CSS 文件内容必须是纯 CSS，不能含 JSX、
export或import，例如：@tailwind base; @tailwind components; @tailwind utilities;
- 不要在
app/page.tsx或组件内 import 任何 Tailwind CSS 文件 —— Next.js 会报Global CSS cannot be imported from files other than your Custom <code>App错误
开发时 class 不生效？优先检查 content 路径是否匹配文件扩展名
常见现象：写了 text-blue-500，但文字没变色；DevTools 里看不到对应 utility class 的 CSS 规则。大概率是 tailwind.config.js 的 content 数组没覆盖到你当前文件的路径或扩展名。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认
content中的 glob 模式是否包含你正在编辑的文件类型，比如用了.tsx但配置里只写了*.js - App Router 下推荐写法：
content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"]—— 注意**是递归，*是单层，漏掉**就不会扫描子目录 - 改完
tailwind.config.js后必须重启next dev，Tailwind 不监听配置文件变更
生产环境样式丢失？验证 process.env.NODE_ENV === 'production' 下的 Purge 行为
Tailwind 默认在生产模式下启用 tree-shaking（通过 content 扫描 + 移除未用 class），但如果 content 路径错误或动态 class（如 className={\`text-\${color}-500\`}）没被正则捕获，就会被误删。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 开发阶段用
TAILWIND_MODE=watch next dev强制开启 JIT 模式，可提前暴露 purge 问题 - 对动态 class，显式添加到
safelist：例如safelist: [/^text-(red|blue|green)-500$/] - 上线前运行
next build && next start本地验证，别只信next dev的热重载效果
content 字段很容易顾此失彼。 
