Skip to main content

Tailwindcss preflight 是做什么用的？

· 3 min read

Preflight 是 Tailwind CSS 内置的「基础样式重置/规范化」工具，基于 modern-normalize，抹平浏览器默认样式差异，统一基线，让你只用工具类就能一致地控制布局与外观。

核心做了 5 件事：

  1. 全局 box-sizing：所有元素默认 border-box，保证 padding/border 不会撑宽元素

  2. 清空默认边距：清除 h1~h6、p、ul、blockquote 等默认 margin/padding，避免意外留白

  3. 语义化但无外观：标题不再自带大小/加粗，列表去掉项目符号，只保留语义

  4. 媒体默认 block：img、svg、video、canvas 默认 display: block，避免底部空白间隙

  5. 表单元素统一：修复 Safari 等浏览器的控件样式差异，继承字体

注入到 base 层，优先级低于 components/utilities，完全不影响你写的样式。

与传统 CSS Reset 的区别​

方案特点适用场景
Reset.css几乎把所有样式全归零，太粗暴早期前端开发
Normalize.css保留有用默认样式、修复差异传统 CSS 项目
Preflight专为 Tailwind 设计——只重置影响布局/一致性的部分，保留语义Tailwind 项目

Preflight 的设计哲学是：清空所有浏览器默认样式，让工具类（如 m-4、text-xl）能精准控制样式，不受浏览器默认值干扰。

核心重置详解​

1. 全局 box-sizing​

*, ::before, ::after {
  box-sizing: border-box;
}

这是现代布局的基础，确保你设置的宽度就是最终渲染的宽度，padding 和 border 向内收缩。

2. 清空默认边距​

* {
  margin: 0;
  padding: 0;
}

浏览器对不同元素有不同的默认边距，比如 <h1> 默认 margin: 0.67em 0，<ul> 默认 padding-left: 40px。Preflight 全部清零，让你用 m-* 和 p-* 精确控制。

3. 标题与列表​

  • 标题：font-size: inherit; font-weight: inherit; 不再自带大小和加粗
  • 列表：list-style: none; 去掉项目符号
注意：列表语义仍然保留（屏幕阅读器知道这是列表），只是去掉了视觉样式。

4. 图片与媒体元素​

img, svg, video, canvas {
  display: block;
  vertical-align: middle;
}

修复了行内元素常见的"底部 3px 空白间隙"问题。

5. 表单统一​

  • button、input、select、textarea 继承字体
  • 修复 Safari 的圆角、边框等不一致问题
  • 统一 placeholder 样式

如何禁用（不推荐）​

如果真的需要关闭 Preflight（会破坏一致性，不建议）：

// tailwind.config.js
module.exports = {
  corePlugins: {
    preflight: false,
  }
}
禁用后需要自己处理 box-sizing、默认边距、列表样式等，否则跨浏览器差异会很明显。

Reference​

  1. Tailwind CSS Preflight 官方文档
  2. modern-normalize GitHub