Preflight and Base Styles

This section documents Tailwind CSS v4.x — the CSS-first configuration line, whose v4.0 release shipped in January 2025 — as published at the official Tailwind CSS documentation, which is the reference these pages are written and verified against. No specific patch version is pinned.

This content was generated with the assistance of AI and should be verified against the official documentation before being relied on in production, since Tailwind iterates quickly.

This section’s bibliography lists the reference material consulted while preparing these pages.

Preflight is Tailwind’s opinionated base layer — a cross-browser reset built on top of modern-normalize that removes the browser’s default styling so utilities have a predictable starting point. It is emitted into the base cascade layer, so any real CSS you write later overrides it easily. See Preflight.

What Preflight resets

Change Effect

Margins removed

h1--h6, p, blockquote, figure, dl, dd, lists — all default margins set to 0, so spacing only comes from utilities you add.

Headings unstyled

h1--h6 inherit font-size and font-weight from their parent; you opt back in with text-2xl font-bold etc. (keeps you on the type scale).

Lists unstyled

ul, ol, menu get list-style: none and no padding. Re-enable with list-disc list-inside or in @layer base.

Borders reset

Every element gets border: 0 solid so border / border-2 add a visible line without also having to set border-style. The default border colour is currentColor (v3 defaulted to gray-200).

Media block-level

img, svg, video, canvas, audio, iframe, embed, object are display: block and vertical-align: middle.

Media constrained

img and video get max-width: 100% and height: auto so they never overflow their container.

Form controls

button, input, select, textarea inherit font and colour; button gets cursor: default (v3 used pointer); placeholder text uses the current text colour at 50% opacity.

hidden wins

An element with the hidden attribute stays display: none even if you also put block / flex on it.

 
/* a representative slice of what Preflight emits into @layer base */
*, ::after, ::before, ::backdrop {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ol, ul, menu { list-style: none; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }

It ships automatically

Preflight is part of the single import — there is no separate include:

@import "tailwindcss";
/* expands to:
   @import "tailwindcss/theme.css"     layer(theme);
   @import "tailwindcss/preflight.css" layer(base);
   @import "tailwindcss/utilities.css" layer(utilities);   */

Extending Preflight

Add your own element-level defaults in @layer base. Because these land in the same layer as Preflight, later utilities still override them. Use theme variables for the values so the defaults track your design tokens.

@import "tailwindcss";

@layer base {
  h1 { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); }
  h2 { font-size: var(--text-xl); }
  a  { color: var(--color-sky-600); text-decoration-line: underline; }

  /* restore readable defaults inside CMS / Markdown output */
  .prose-fallback :is(ul, ol) { list-style: revert; padding-left: revert; }
}

See Adding base styles.

Disabling or partially adopting Preflight

Import the layers individually and simply omit preflight.css:

/* theme variables + utilities, but no reset */
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

When you split the import like this, options that normally attach to @import "tailwindcss" move to the relevant sub-import: source(…​) and important go on the utilities.css line, theme(static) / theme(inline) on the theme.css line, and prefix(…​) on both. This is the usual approach when adding Tailwind to an existing codebase that already has its own reset, or when embedding a Tailwind-styled widget inside a host page you do not control.

Related pages