@tailwind base 仅重置盒模型（box-sizing: border-box）及默认字体、行高，不重置标题margin或表单样式；必须置于CSS最顶部以防被覆盖，不可跳过否则导致布局错位。
@tailwind base 会重置哪些样式？
它不等于 normalize.css 或 reset.css，而是 Tailwind 自己的一套极简基础层：仅处理 html、body、*, *::before, *::after 的盒模型（box-sizing: border-box），加上一些默认字体族和行高。没有移除 h1 的 margin，也不重置表单控件外观。
- 真正影响布局的只有
box-sizing—— 这是后续所有padding/border计算不出错的前提 -
@tailwind base不包含任何浏览器兼容性补丁（比如旧版 Safari 的input垂直对齐） - 如果你项目里已引入
normalize.css，@tailwind base仍需保留，它不重复，但不可替代
为什么必须放在 CSS 文件最顶部？
因为 @tailwind base 输出的是最低优先级的通用选择器（如 * { box-sizing: border-box }）。如果它被写在其他规则后面，而你又写了类似 div { box-sizing: content-box }，就会被覆盖 —— 导致 padding 行为意外。
- 错误位置示例：
@tailwind components;<br>@tailwind base; ← 这样无效，base 被压在下面
- 正确顺序：
@tailwind base;<br>@tailwind components;<br>@tailwind utilities;
- PostCSS 插件不会帮你校验顺序，编译时也不会报错，但 bug 会在布局错位时才暴露
能否跳过 @tailwind base？
能，但代价是手动补全所有 box-sizing 声明，且必须确保每个新写的组件类都显式带上 box-border —— 实际上没人这么干。
- 跳过方式：
@layer base { }空声明，或注释掉该行 - 后果：第三方 UI 库（如 Headless UI）内部依赖
border-box，可能触发边框溢出、宽度计算偏差 - 某些构建工具（Vite + CSS in JS）若用
import 'tailwindcss/base.css'替代@tailwind base，要注意路径是否指向真实文件，否则导入为空
自定义基础样式要加在哪一层？
必须用 @layer base，不能直接写在 @tailwind base 下面，也不能塞进 @layer components。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
@layer base {<br> h1 { @apply text-2xl font-bold mb-4; }<br> input::placeholder { @apply text-gray-400; }<br>} - 错误写法：
h1 { @apply ... }（无@layer）→ 构建后可能被抽到 utilities 层，优先级错乱 - 注意：自定义的
@layer base会追加在 Tailwind 原生 base 输出之后，所以可以安全覆盖其默认值（比如改body字体）
Tailwind 的基础重置非常轻，但位置和层级稍有偏差，就会让后续所有尺寸控制变得不可预测。真正容易被忽略的不是“要不要加”，而是“加在哪一行”和“有没有被其他 CSS 意外覆盖”。
