@tailwind base必须位于主CSS入口文件最顶部且仅出现一次，因其提供浏览器重置、默认排版、字体继承和盒模型基础；位置错误会导致变量未定义、样式被覆盖或重复重置，PostCSS未运行则指令仅被忽略。
@tailwind base 必须出现在主 CSS 入口文件最顶部，且仅出现一次；它不是可选装饰，而是整个 Tailwind 样式层叠的起点。
为什么 @tailwind base 不能随便放？
Base 层提供浏览器重置、默认排版（html、body、*、::before、::after）、字体继承和盒模型基础。如果它被放在 @tailwind components 后面，.btn 类里用到的 font-size 或 line-height 可能还没定义；如果放在 @tailwind utilities 后面，像 text-red-500 这类工具类就可能被 base 里的 body { color: #1f2937 } 覆盖掉。
-
@tailwind base必须是第一个指令，否则全局重置失效，页面字体/间距/滚动条会异常 - 多个
@tailwind base会导致重复重置，margin和font-size叠加后页面突然“撑开” - 写在组件级 CSS（如
Button.module.css）里完全无效——构建系统只处理入口 CSS
如何安全地扩展 Base 层？
直接写 CSS 规则进 @layer base，而不是改 tailwind.config.js。Tailwind 会把它自动注入到 @tailwind base 的同一位置，确保优先级正确。
- 用
@apply复用已有的工具类，比如h1 { @apply text-3xl font-bold; } - 自定义
@font-face必须放在@layer base里，否则字体不会被 base 层加载上下文识别 - 避免在
@layer base中写高特异性选择器（如div#header h1），这会破坏层叠逻辑 - 不要在
@layer base里用@screen，响应式断点只在 utilities 层生效
PostCSS 没跑，@tailwind base 就只是注释
这是最常被忽略的环节：@tailwind 指令本身不生成任何 CSS，它只是 PostCSS 插件的占位符。如果构建流程没调用 PostCSS，输出 CSS 里就原样留着 @tailwind base，浏览器直接忽略。
立即学习“前端免费学习笔记（深入）”；
- 检查
postcss.config.js是否包含require('tailwindcss') - 确认构建命令实际执行了 PostCSS（例如 Vite 默认启用，Webpack 需配
postcss-loader） - 手动验证：运行
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch，打开输出文件看是否生成了大量规则 - Next.js 用户注意：
app/globals.css是唯一有效的入口，pages/_app.tsx里导入的其他 CSS 不参与@tailwind解析
真正卡住人的往往不是语法写错，而是那个 @tailwind base 所在的 CSS 文件，既没被 PostCSS 处理，也没被构建系统当作入口“看见”。先盯住构建链路，再调样式。
