Tailwind CSS - Preflight

---

---

Tailwind CSS Preflight is a base style for Tailwind projects. It is used to make it easier for styling or effects on different browsers. If we include the '@tailwind base', it will automatically inject the styles.

Purpose of Tailwind CSS Preflight

All the tags carried some predefined styles. Preflight removes the dependency of relying on styles applied by the user-agent stylesheet that are not part of your spacing scale. The Preflight is used to remove those styles from those elements. Like heading tags, font-size is defined within the tags. This preflight removes that and keeps

element content as normal text. There are styles in Preflight that are meant to go unnoticed.

Example

In the following example, you will see an h1 element is created, but the output is not the same as you expected.

    



    
Tailwind CSS

Styles Applied by Preflight

There are a lot of styles applied by Preflight here in this article we will describe only the important ones, for the complete reference you can check this link.

• Default Margins Removed
• Headings are Unstyled
• Lists are Unstyled
• Medias are block-level
• Images are Constrained to the Parent Width
• Border Styles are Reset Globally

Default Margins Removed

There are lots of elements in HTML that hold some margin, but this Preflight will make them normal by removing that margin. Elements like headings, blockquotes, paragraphs, pre, etc.

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

Headings are Unstyled

All the headings elements are without style in Tailwind CSS, to define the required text styling you have to use different classes.

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

Lists are Unstyled

Ordered and unordered lists are unstyled by Preflight. It removed the margin, padding, bullets, and numbers as well. Unstyled lists are not announced as lists by VoiceOver. If the content is truly a list but we would like to keep it unstyled, we needs to add a list role to the element.

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

Medias are block-level

All the media elements are unstyled, like images, video, canvas, etc. All them are block-level and vertically aligned to the middle.

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

Images are Constrained to the Parent Width

Images and Videos width will be set based on the parent element width. To set the width, you need to set it manually using the required Tailwind CSS classes.

img,
video {
  max-width: 100%;
  height: auto;

Border Styles are Reset Globally

Preflight overrides the default border styles for all elements. This is making it easy to add by simply using the border class.

*,
::before,
::after {
  border-width: 0;
  border-style: solid;
  border-color: theme('borderColor.DEFAULT', currentColor);
}

Extending Preflight

If we want to add our own base styles over the Tailwind CSS Preflight, then we can define our own CSS using the '@tailwind base' directive.

@tailwind base;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  a {
    @apply text-green-600 underline;
  }
}

@tailwind components;

@tailwind utilities;

Disabling Preflight

If we wants to use Tailwind CSS on an existing project then we should disable the Preflight unless it will remove certain styling like margin, font-size from heading, etc. To disable Preflight go to your 'tailwind.config.js' file and add 'preflight' to 'false' inside of 'corePlugins' section.

module.exports = {
  corePlugins: {
    preflight: false,
  }
}