@layer base 是必选项，因为 Tailwind 默认不重置浏览器原生样式，h1、p等标签保留默认边距和字体，导致布局错乱；必须在此层设置box-sizing、body、标题、段落、列表、图片等基础样式以统一渲染行为。
为什么 Tailwind 的 @layer base 不是可选项而是必选项
因为 Tailwind 默认不接管基础元素样式，h1、p、ul 等标签仍带着浏览器原生默认边距和字体，直接写 HTML 会看到意外的空白、缩进或字号跳跃。不用 @layer base，等于放任浏览器样式和 Utility 类混战——你写的 text-lg 可能被 h2 自带的 margin-block-start: 0.83em 拉偏布局。
哪些样式必须塞进 @layer base
不是所有重置都适合放这里：只放影响布局流和默认渲染行为的基础规则，避免侵入组件逻辑。常见必须项包括：
-
*, *::before, *::after的box-sizing: border-box（Tailwind 默认已含，但显式声明更可控） -
body的margin: 0和font-family（否则font-sans不生效） -
h1–h6的margin、font-weight、line-height（浏览器默认值差异大） -
p、ul、ol、blockquote的margin（尤其注意ul的padding-inline-start在 Safari/Firefox 表现不一） -
img的max-width: 100%和height: auto（防止溢出容器）
@layer base 和 CSS Reset / Normalize 的关系
它不是替代 Normalize.css，而是承接其输出结果后做“Tailwind 化适配”。比如 Normalize 会重置 button 的 border 和 background，但 Tailwind 的 btn 类可能依赖这些重置后的初始值；若跳过 @layer base 直接写 btn bg-blue-500，按钮在某些浏览器里仍可能有微小边框残留或对齐偏移。关键区别在于：
- Normalize 是通用层，作用于所有标签；
@layer base是项目层，只写你实际用到的标签 - Normalize 用大量选择器模拟一致行为；
@layer base用极简规则 + Utility 类组合达成同样效果 - 若引入了第三方 UI 库（如 Headless UI），它的组件内部可能依赖特定基础样式，
@layer base能提前锚定这些前提
容易被忽略的兼容性陷阱
最常踩坑的是伪元素和表单控件：
立即学习“前端免费学习笔记（深入）”；
-
::selection必须显式写在@layer base里，否则bg-blue-500这类 Utility 对选中文本无效 -
input[type="number"]在 Chrome 有默认appearance: textfield，但 Safari 需要-webkit-appearance: none才能彻底交由 Tailwind 控制 -
textarea的resize默认为both，若没在@layer base设成resize: none，Utility 类resize-y可能失效 - 使用
@layer base后，务必确认构建工具（如 Vite、Next.js）启用了content路径扫描，否则自定义 base 规则可能被 PurgeCSS 误删
真正麻烦的从来不是写几行重置代码，而是当某个 h3 在测试环境突然多出 24px 上边距时，你得想起它根本没进 @layer base，而是在某处被浏览器悄悄加了 margin-block-start: 1.33em。
