Preflight

Tailwind’s stylesheet

Tailwind utilities often come in families with a common pattern of beginnings or endings. When we talk about those, we’ll use: .text-{size} to indicate a family of utilities that include @tailwind base, @tailwind components, and @tailwind utilities. Each of these files contains a different set of CSS rules.

Note: In the Webpack-based installation, we import with @import as the command name rather than @tailwind.

The @tailwind base file contains Tailwind’s reset stylesheet called Preflight. A reset stylesheet is a restyling of all the base HTML elements to a minimal set of styling properties. Without a reset stylesheet, each browser defines its own default set of style properties to render individual HTML elements that do not have further CSS properties. A reset stylesheet gives our application control over this baseline, eliminates differences between browsers, and provides a more minimal backdrop into which we insert our custom styling.

Full set of reset styles

Tailwind’s reset stylesheet, Preflight, performs the following tasks:

• It overrides all styling from headers—so an h1 header, for example, is visually identical to the base text.

• It removes styling from ul and ol lists, resulting in no bullets by default.

• It sets all margins to zero for elements that would normally have margins.

• By default, it sets all borders to a 0-pixel width, solid, and the defined border color.

• It sets images and image-like objects to display: block rather than display: inline, meaning they will set themselves up as separate paragraphs (as if they were div tags), rather than inline (as if they were span tags).

We’ll get a pretty boring page if we only use the Preflight styles. Preflight ensures that we affirmatively and explicitly add any change to the display properties.

The @tailwind components file is quite small, and it only consists of the definitions of the container CSS classes, which are usually used at the top level of a page to define the box that the whole page is drawn in.

The bulk of what’s considered to be Tailwind is in the @tailwind utility file, which defines all the utilities and their prefixed variants. While working with Tailwind, we mostly use the contents of this file.