是，next.js 14 已将 app router 设为默认架构，传统 pages router 进入维护期；其核心包括 server components、layouts、streaming、server actions 和 edge 优化。
确认 Next.js 14 是否已启用 App Router
Next.js 14 默认推荐 App Router，而 Tailwind 的按需生成（即 content 路径扫描）在 App Router 下行为与 Pages Router 略有差异。如果你的项目是用 create-next-app 生成且未手动降级，大概率已是 App Router —— 这直接影响 tailwind.config.js 中 content 字段要包含 app/**/*.{js,ts,jsx,tsx}。
检查项目根目录是否存在 app/layout.tsx 或 app/page.tsx；若存在，说明是 App Router。否则可能是 Pages Router，需额外注意 pages/**/*.{js,ts,jsx,tsx} 路径是否纳入扫描。
- App Router 必须显式在
content中加入app/**/*.{js,ts,jsx,tsx}，否则组件内写的 class 不会被识别，导致样式不生效 - Pages Router 同理要加
pages/**/*.{js,ts,jsx,tsx}，漏掉就等于关掉了按需生成 - 如果混用（比如
app+pages），两个路径都得写全，否则部分文件的 class 会被忽略
配置 tailwind.config.js 开启真正按需生成
Tailwind 默认就是按需生成，但“按需”依赖于 content 配置是否精准 —— 它不是自动扫描所有 JS/TS 文件，而是只读你明确列出的 glob 模式。很多人配完发现大量 class 没生效，根本原因是 content 漏了路径或扩展名。
一个典型的、适配 App Router 的 tailwind.config.js 应该长这样：
用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./layouts/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
-
./app/**/*.{js,ts,jsx,tsx}是必须项，./开头不能省，否则可能被某些构建工具忽略 - 自定义组件目录（如
components）必须显式加入，Tailwind 不会递归推断你把 UI 拆在哪 - 不要写
**/*.tsx这种过于宽泛的模式，Next.js 构建时可能因性能原因跳过深层扫描，反而漏掉内容 - 如果用了 MDX（如
app/blog/[slug]/page.mdx），还得加上./app/**/*.{mdx}，否则 MDX 里的 class 不进 CSS
验证按需生成是否真生效
最直接的方式：在某个 app/page.tsx 里临时写一个极冷门的 class，比如 bg-[#1a2b3c] 或 text-7xl（默认 theme 里没定义 7xl），然后看浏览器是否渲染成功。如果失败，说明按需没走通 —— 大概率是 content 没覆盖到该文件，或者文件后缀没列全。
- 运行
npm run dev后，打开浏览器开发者工具，搜索生成的<style></style>标签，Ctrl+F 查找你刚写的 class 名，能搜到说明已提取 - 删掉
content数组中某一项（比如注释掉./components/**/*），再改一个组件内的 class，刷新后消失 → 就证明它确实在按路径“按需”干活 - 注意：开发时热更新可能缓存旧 CSS，可强制清空
.next目录再试，避免误判
别忽略 PostCSS 和全局 CSS 加载顺序
Tailwind 依赖 PostCSS 插件链，Next.js 14 默认已内置，但如果你手动删过 postcss.config.js 或改过 next.config.js 的 postcss 配置，可能中断流程。另外，全局 CSS（如 app/globals.css）里必须有 @tailwind base;、@tailwind components;、@tailwind utilities; 三句，缺一句都会导致对应层级 class 不生效。
- 确保
app/globals.css顶部有完整的三行@tailwind指令，顺序不能错（base → components → utilities） - 如果用了 CSS Modules（
Component.module.css），里面写@tailwind是无效的 —— Tailwind 只认全局 CSS 文件中的指令 - 自定义插件（如
@tailwindcss/forms）需要在tailwind.config.js的plugins数组里注册，且必须先安装对应包，否则 class 解析会静默失败
按需生成本身没有开关按钮，它由 content 驱动，而驱动是否有效，取决于你有没有让 Tailwind “看见”所有用到 class 的地方。路径写错、后缀漏掉、全局 CSS 缺指令——这三个点卡住任何一个，就会让你以为“按需没开”，其实只是它压根没扫到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
