如何使用Tailwind CSS重置浏览器默认样式_引入preflight基础样式表-css教程-PHP中文网

@tailwind base 是 Tailwind 的 Preflight 样式表，必须置于 CSS 文件顶部且不可省略，它强制 box-sizing: border-box 并标准化关键元素样式，缺失会导致布局错乱。

如何使用tailwind css重置浏览器默认样式_引入preflight基础样式表

@tailwind base 就是 Tailwind 的 Preflight 样式表，它默认已启用，不需要额外引入 —— 但必须放在 CSS 文件最顶部，且不能跳过。

Preflight 是 Tailwind 内置的现代化重置机制（基于 modern-normalize），不是附加插件，也不是可开关的配置项。它在编译时自动注入，但生效前提是你的 CSS 入口文件里明确写了 @tailwind base，且位置正确。

不写 @tailwind base：所有 box-sizing: border-box 规则丢失 → padding/border 计算错乱，布局偏移
写在 @tailwind components 后面：被后续更具体的选择器覆盖 → 比如 div { box-sizing: content-box } 会生效，破坏 Utility 类行为
误以为 “用了 Tailwind 就自动重置”：Preflight 确实存在，但它的输出依赖 @tailwind base 指令触发，PostCSS 不校验顺序，bug 只在布局出问题时才暴露

它不是全量归零，而是有选择地标准化关键渲染行为：

*、*::before、*::after：强制 box-sizing: border-box（唯一影响布局计算的核心）
html：设 line-height: 1.5、text-size-adjust: 100%
body：清空 margin，设默认字体栈
h1–h6、p、blockquote：移除 margin-block，但保留语义化行高和字号比例
ul、ol、li：清除 list-style、padding-inline-start、margin-block（所以默认无缩进、无圆点）
button、input、select、textarea：统一 border、background-color、font 继承，但不改 appearance

⚠️ 注意：img 默认没重置 max-width 或 display；svg 完全没处理；table 相关样式也未触碰 —— 这些得靠 @layer base 手动补。

@tailwind base 是 Preflight 的执行入口，输出固定规则；@layer base 是你自定义覆盖或补充的地方，二者共存且不可替代：

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

想恢复 ul 原生缩进？不能删 @tailwind base，而是在 @layer base 里加：

@layer base {
  ul, ol {
    list-style: revert;
    margin: revert;
    padding: revert;
  }
}

想让所有图片响应式？@tailwind base 不管这事，得在 @layer base 写：img { max-width: 100%; height: auto; }
想禁用 button 的默认焦点轮廓？Preflight 没动 outline，需在 @layer base 显式设 outline: 2px solid transparent（兼顾可访问性）

混淆二者最常导致的问题：删了 @tailwind base 以为能“轻量化”，结果 box-sizing 失效，所有 px 类（如 p-4）尺寸全乱。

看似简单的一行指令，实际在工程链路里有几个硬性前提：

tailwind.config.js 中 corePlugins.preflight 必须为 true（默认就是，但 CI/CD 环境可能被覆盖）
Vite / Next.js / Remix 等框架需确保 content 配置扫到你写 @layer base 的 CSS 文件，否则 PurgeCSS 可能误删自定义规则
revert 在 Safari 14.1+、Chrome 87+、Firefox 69+ 完全可用，但若项目需支持 Safari 13 或更早，得降级用 margin: 0 0 1em 这类硬编码值
第三方 UI 库（如 Headless UI、Radix Vue）内部样式常依赖 Preflight 输出的初始状态，跳过或顺序错会导致下拉菜单错位、模态框滚动异常等“幽灵 bug”