Preflight Base Styles

Preflight

Preflight is an opinionated set of base styles that smooth over cross-browser inconsistencies. It's built on top of modern-normalize and is injected automatically into the base layer when you import Tailwind.

Margins are removed

All default margins are removed from every element:

*,::after,::before,::backdrop,::file-selector-button {
  margin: 0;
  padding: 0;
}

This stops you from accidentally relying on browser default margins.

Border styles are reset

Box-sizing is set to border-box and borders default to solid zero-width:

*,::after,::before,::backdrop,::file-selector-button {
  box-sizing: border-box;
  border: 0 solid;
}

Because of this, adding the border class always gives a solid 1px border using currentColor.

Headings are unstyled

h1-h6 have the same font size and weight as normal text:

h1,h2,h3,h4,h5,h6 {
  font-size: inherit;
  font-weight: inherit;
}

This keeps you on your type scale and lets you style headings deliberately.

Lists are unstyled

No bullets or numbers by default:

ol,ul,menu {
  list-style: none;
}

Add list-disc or list-decimal to style them. For screen readers, add role="list" if a list is semantically a list.

Images are block-level and constrained

img, svg, video, and other replaced elements are display: block, and images/videos keep aspect ratio with max-width: 100%:

img,svg,video,canvas,audio,iframe,embed,object {
  display: block;
  vertical-align: middle;
}
img,video {
  max-width: 100%;
  height: auto;
}

Disabling Preflight

To turn it off, import the individual parts instead of the shortcut:

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css" layer(utilities);

Omit the preflight.css import to disable it.

TL;DR

• Preflight removes default margins and resets borders.
• Headings and lists come unstyled.
• Images are block-level and responsive by default.
• Override it with your own @layer base styles.