@tailwind base必须置于主CSS入口文件最顶部且仅出现一次，因其是PostCSS识别的注入指令，负责提供浏览器重置、字体继承、box-sizing等基础样式；位置错误或PostCSS未运行将导致重置失效、变量未定义、样式被覆盖或静默忽略。
@tailwind base 必须放在主 CSS 入口文件最顶部，且只出现一次；否则重置失效、字体错乱、间距崩坏——这不是可选步骤，而是整个 Tailwind 样式链的起点。
为什么 @tailwind base 放错位置就完全不生效
它不是普通 CSS 规则，而是 PostCSS 插件识别的注入指令。构建时只扫描主入口（如 src/app.css 或 app/globals.css）中第一个 @tailwind base，并严格按 base → components → utilities 顺序拼接三段样式。
- 写在
@import后面？PostCSS 直接跳过，当注释处理 - 写在 Vue SFC 的
<style>块里？Vite 默认不将其视作入口，静默忽略 - 和
@layer base顺序颠倒？自定义样式会被未加载的 Preflight 规则覆盖，h1字体、textarea圆角全无效 - 放在
@tailwind components后面？.btn里用的font-size可能还没定义，编译报变量未定义错误
如何安全扩展 Base 层（比如改默认字体或 h1 样式）
别直接改 tailwind.config.js，也别手写高特异性选择器。正确做法是用 @layer base，Tailwind 会自动把它注入到 @tailwind base 输出的所有规则之后，确保能覆盖又不破坏层叠逻辑。
- 自定义
@font-face必须放@layer base里，否则字体不会被 base 层上下文识别 - 想让
h1用text-3xl font-bold？写：h1 { @apply text-3xl font-bold; } - 要恢复
ul原生缩进？写：ul { list-style: revert; margin: revert; } - 避免写
div#header h1这类高特异性选择器，会干扰层叠优先级 -
@screen在@layer base里无效——响应式断点只在utilities层生效
PostCSS 没跑，@tailwind base 就只是废文本
这是最常被忽略的环节：@tailwind base 本身不生成任何 CSS，它只是 PostCSS 插件的占位符。如果构建流程没调用 PostCSS，输出文件里就原样留着这行，浏览器直接忽略。
立即学习“前端免费学习笔记（深入）”；
- 检查
postcss.config.js是否包含require('tailwindcss')，且config项指向正确的tailwind.config.js - Webpack 项目需确认配置了
postcss-loader；Vite 用户留意是否误删了默认 PostCSS 支持 - Next.js 用户注意：
app/globals.css是唯一有效的入口，pages/_app.tsx里导入的其他 CSS 不参与@tailwind解析 - 手动验证：运行
npx tailwindcss -i ./src/app.css -o ./dist/output.css --watch，打开输出文件看是否生成大量规则（如.text-red-500），而不是原样保留@tailwind指令
真正卡住人的，往往不是语法记不住，而是终端日志里根本没看到 PostCSS 启动，或者压根没确认那个写着 @tailwind base 的 CSS 文件，是不是真被构建工具 import 进了主流程。
