tailwind类不生效主因是content路径未覆盖实际使用文件，需确保配置如"./src/*/.{js,jsx,ts,tsx}"精确匹配，并在globals.css中正确写入三行@tailwind指令且重启开发服务器。
Tailwind CSS 的全局样式不是靠“全局 CSS 文件”生效的，而是靠 @tailwind 指令注入 + content 配置扫描范围来决定哪些工具类会被生成。直接往 globals.css 里写普通 CSS 规则，不会让 Tailwind 类自动生效；反过来，不配 content，哪怕写了 @tailwind utilities，也会漏掉大量类。
为什么 tailwind 类在某些页面/组件里不生效？
最常见原因是 tailwind.config.js 中的 content 路径没覆盖到实际使用 className 的文件位置。比如：
- 项目用了
src/app结构，但配置里只写了./app/**/*（漏了src/前缀） - 组件放在
src/components，但content里没包含该路径 - 用了 Pages Router（
pages/），但配置里只扫了app/
Tailwind 不是运行时解析 className，而是在构建时静态扫描所有匹配 content 的文件，提取出用到的类名，再生成对应 CSS。路径错一丁点，对应文件里的 text-blue-500 就不会被识别，最终编译出的 CSS 里压根没有这条规则。
如何确保 globals.css 正确加载并起作用？
app/globals.css 是 App Router 的唯一全局样式入口，必须满足两个条件：
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 它得被
app/layout.tsx显式导入（Next.js 13+ 不再自动加载） - 它顶部必须有且仅有这三行：
@tailwind base;、@tailwind components;、@tailwind utilities;
别把自定义 CSS 写在 @tailwind 指令前面——那样会被 Tailwind 的重置样式覆盖；也别删掉其中任意一行，否则基础排版、组件预制样式或工具类全失效。如果要用暗黑模式，darkMode: 'class' 必须写在 tailwind.config.js 里，而不是靠手动加 class="dark" 到 HTML 上。
能不能在 globals.css 里写自己的 CSS 规则？
可以，但要严格按层（@layer）组织：
-
@layer base：放全局重置、字体、颜色变量（如body { @apply bg-white dark:bg-gray-900; }） -
@layer components：封装可复用的复合类（如.btn-primary { @apply bg-blue-600 text-white px-4 py-2 rounded; }） -
@layer utilities：不建议写，Tailwind 工具类已足够细粒度，自己加会破坏原子性
直接写 h1 { color: red; } 在 globals.css 顶层是危险的——它可能被 Tailwind 的 base 层重置覆盖，也可能污染所有 h1，失去组件隔离性。真要覆盖，优先用 @layer base 或组件级 className。
最容易被忽略的点：修改 tailwind.config.js 后必须重启开发服务器（npm run dev），热更新不会重新扫描 content 路径。另外，VS Code 的 Tailwind 插件提示类名，不代表这些类一定被生成——最终以构建产物为准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
