Tailwind CSS · Utilities reference · all subjects

preflight

16 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Preflight automatically injected into base layer

When you import tailwindcss into your project, Preflight is automatically injected into the base layer. The default import includes three layers: @import "tailwindcss/theme.css" layer(theme), @import "tailwindcss/preflight.css" layer(base), and @import "tailwindcss/utilities.css" layer(utilities).

Preflight removes all default margins

Preflight removes all default margins from all elements including headings, blockquotes, paragraphs, and others by applying margin: 0 and padding: 0 to *, ::after, ::before, ::backdrop, and ::file-selector-button. This prevents accidentally relying on margin values from the user-agent stylesheet that are not part of the design system's spacing scale.

Preflight resets border styles

Preflight applies box-sizing: border-box and border: 0 solid to *, ::after, ::before, ::backdrop, and ::file-selector-button. This reset ensures that adding the border class always adds a solid 1px border that uses currentColor. This can cause unexpected results when integrating third-party libraries like Google Maps.

Preflight unsets heading sizes and weights

All heading elements (h1-h6) are completely unstyled by default with font-size: inherit and font-weight: inherit. This prevents accidentally deviating from the type scale and ensures that in UI development, heading styling happens consciously and deliberately.

Preflight removes list style formatting

Ordered and unordered lists (ol, ul, menu) are unstyled by default with list-style: none, removing bullets and numbers. To style lists, use the list-style-type and list-style-position utilities.

Unstyled lists are not announced as lists by screen readers

Unstyled lists with list-style: none are not announced as lists by VoiceOver. If the content is truly a list and you want to keep it unstyled, add role="list" to the element to ensure proper accessibility.

Preflight makes images block-level by default

Images and replaced elements (svg, video, canvas, audio, iframe, embed, object) have display: block and vertical-align: middle applied by default. This avoids unexpected alignment issues from the browser default of display: inline. Use the inline utility to make these elements inline if needed.

Preflight constrains images to parent width

Images and videos have max-width: 100% and height: auto applied by default, preventing overflow and making them responsive by default while preserving intrinsic aspect ratio. Use the max-w-none utility to override this behavior.

Hidden elements stay hidden by default

Preflight applies [hidden]:where(:not([hidden="until-found"])) { display: none !important; } to enforce that elements with a hidden attribute stay invisible unless using hidden="until-found". Remove the hidden attribute to make an element visible.

Extend Preflight with @layer base

To add your own base styles on top of Preflight, use @layer base in your CSS. Styles within @layer base are applied at the base layer, allowing you to extend default element styles like headings, links, and other elements.

Disable Preflight by selective import

To completely disable Preflight, omit the @import "tailwindcss/preflight.css" line while keeping the theme and utilities imports. This is useful when integrating Tailwind into existing projects or when you prefer to define your own base styles.

Disable Preflight for specific elements using @layer base

You can work around unexpected Preflight behavior by overriding specific styles using @layer base. For example, to prevent border resets on third-party elements, use @layer base { .google-map * { border-style: none; } }.

source() directive placement for utilities import

When importing Tailwind CSS files individually, the source() directive affects generated utilities and should be added to the utilities.css import: @import "tailwindcss/utilities.css" layer(utilities) source(none);

important directive placement for utilities import

The important directive affects utilities and should be added to the utilities.css import: @import "tailwindcss/utilities.css" layer(utilities) important;

theme() directive placement for theme import

The theme(static) and theme(inline) directives affect generated theme variables and should be placed on the theme.css import: @import "tailwindcss/theme.css" layer(theme) theme(static);

prefix() directive placement for both theme and utilities imports

The prefix() directive affects both utilities and theme variables, so it should go on both the theme.css and utilities.css imports: @import "tailwindcss/theme.css" layer(theme) prefix(tw); and @import "tailwindcss/utilities.css" layer(utilities) prefix(tw);

Give your agent this brain