@tailwind base必须为CSS文件首个Tailwind指令，顺序严格为base→components→utilities；因base提供全局重置和变量依赖，components需其定义的排版变量，utilities须最后覆盖前两者。
@tailwind base 必须是 CSS 文件中第一个 Tailwind 指令，且顺序不可调换：base → components → utilities。 顺序错、PostCSS 没跑、或写在非入口文件里，都会导致样式完全不生效——不是“部分失效”，而是整层丢失。
为什么 base 必须放在最前面？
Tailwind 的 @tailwind base 输出的是全局重置规则（比如 * { box-sizing: border-box }、html { font-size: 16px }），这些是后续所有样式的底层依赖。如果把它放在 @layer base 或自定义 @import 后面，你的样式会被它覆盖掉，开发者工具里能看到规则被划掉。
-
@tailwind components会用到@tailwind base定义的排版变量（如font-size、line-height），提前引入会报undefined variable -
@tailwind utilities必须在最后，否则text-red-500这类工具类无法覆盖.btn中声明的颜色 - 多个
@tailwind base会导致重复重置，页面字体突然变大、间距崩坏
PostCSS 没运行，@tailwind 就只是注释
你写的 @tailwind base 在构建流程里没被处理，终端日志里也不会报错——它就静静躺在 CSS 文件里，像一行普通注释。验证方法很简单：
- 运行
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch，打开输出文件，确认里面有没有大量生成的 CSS 规则（不是原样保留@tailwind） - 检查
postcss.config.js是否启用了tailwindcss插件，且tailwindcss配置指向正确的tailwind.config.js - Webpack 项目需确认用了
postcss-loader；Vite 默认支持，但若用了 CSS-in-JS（如styled-components），@tailwind直接不适用
@layer base 写在哪才真正起作用？
@layer base 不是随便塞在文件任意位置就能生效的。它必须紧接在 @tailwind base 之后，中间不能有空行、注释或 @import 打断。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
@layer base { h1 { @apply text-3xl; } }出现在@tailwind base前面 → 静默失效 - 正确顺序只有一种：
@tailwind base→@layer base→@tailwind components - 调试时看浏览器开发者工具 Styles 面板，目标元素上应出现带
data-layer="base"的样式块，且未被data-tailwind="true"规则覆盖 -
@apply在@layer base中完全可用，但伪类（如:focus）必须拆成独立选择器，不能链式写进同一行
真正卡住人的从来不是语法对不对，而是那个主 CSS 文件有没有被构建系统“真正看见”，以及 PostCSS 日志里有没有那一行 “Processing x files…”——多盯两秒终端，比改十遍 CSS 更有效。
