@tailwind base必须置于入口css文件最顶部，因其是编译器识别的注入指令，仅扫描主入口且严格按base→components→utilities顺序拼接；错位则box-sizing、字体继承等全部失效，布局悄然错乱。
@tailwind base 必须出现在入口 CSS 文件最顶部，且顺序不可调换；否则 box-sizing、字体继承、重置规则全部失效，布局会悄悄错乱。
为什么 @tailwind base 放错位置就失灵
它不是普通 CSS 规则，而是 Tailwind 编译器识别的注入指令。PostCSS 扫描时只认入口文件（如 src/styles.css）中首次出现的 @tailwind 指令，并严格按声明顺序拼接三段样式：base → components → utilities。
- 把
@tailwind base写在@import后面？编译器跳过它，当注释处理 - 写在 Vue SFC 的
<style></style>块里？Vite 默认不将其视作构建入口，静默忽略 - 和
@layer base顺序颠倒？自定义样式会被未加载的 base 规则覆盖，h1字体、textarea圆角全无效
PostCSS 没跑，@tailwind 就是废文本
你写的 @tailwind base 在终端日志里没被解析，输出 CSS 文件里还是原样保留这行？那说明 PostCSS 根本没参与构建链路。
- 检查
postcss.config.js是否启用tailwindcss插件，且config项指向正确的tailwind.config.js - Webpack 项目需确认配置了
postcss-loader；Vite 用户留意是否误删了默认的 PostCSS 支持 - 手动验证：运行
npx tailwindcss -i ./src/styles.css -o ./dist/output.css --watch，看输出文件是否含大量生成规则（如.text-red-500）
@layer base 里改样式，必须等 @tailwind base 跑完
@layer base 不是替代方案，而是补充机制——它的内容会被 Tailwind 编译器自动追加到 @tailwind base 输出的所有规则之后，确保能覆盖 Preflight 的默认行为。
- 想恢复
ul原生缩进？不能删@tailwind base，而是在它后面写：@layer base { ul { list-style: revert; margin: revert; } } - 要用
@apply复用主题值（比如@apply text-2xl），但别在普通 CSS 规则里直接调theme('fontSize.2xl')，它只在@layer块内生效 - 多个
@layer base块可共存，Tailwind 会合并它们，但所有块都必须在@tailwind base之后
真正卡住人的从来不是语法记不住，而是终端里没看到 PostCSS 的启动日志，或者压根没确认那个写着 @tailwind 的 CSS 文件，是不是真被构建工具 import 进了主流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
