Tailwind CSS - Preflight

Understanding Tailwind CSS Preflight

Tailwind CSS Preflight is an opinionated set of base styles that acts as a sophisticated CSS reset. Built on top of the popular modern-normalize, it smooths out cross-browser inconsistencies and provides a clean, predictable starting point for your styling. When you include @tailwind base in your CSS, Preflight is automatically applied.

The Purpose of Preflight: A Clean Slate

Imagine each browser gives HTML elements a default set of clothes (margins, font sizes, etc.). These outfits can vary slightly between browsers, leading to unpredictable layouts. Preflight removes all these default styles, ensuring that any styling you see is styling you explicitly applied with Tailwind’s utility classes. This prevents you from fighting with the browser’s default stylesheet and leads to more consistent designs.

Example: The Unstyled <h1>

In a normal HTML document, an <h1> tag is large and bold by default. With Preflight, it looks like plain text until you style it yourself. This is intentional.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
  <title>Preflight Demo</title>
</head>
<body class="p-8 font-sans">

  <h1>This heading looks like regular text.</h1>
  <h1 class="text-4xl font-bold">This one is styled with utilities.</h1>

</body>
</html>

Key Styles Applied by Preflight

Preflight applies many subtle resets. Here are some of the most important ones:

• Default Margins are Removed: Elements like headings, paragraphs, and blockquotes have their default margins stripped, so you can control spacing consistently with utilities like m-4 or my-2.
• Headings are Unstyled: <h1> through <h6> elements are reset to have no special font size or weight. You must style them with font size and weight utilities.
• Lists are Unstyled: <ul> and <ol> lists have their default padding and bullet points/numbers removed. Use list utilities like list-disc and list-inside to add them back.
• Images are Block-level: <img>, <svg>, <video>, etc., are set to display: block;. This removes the small space that sometimes appears below them when they are inline.
• Images are Constrained: Images and videos are set to max-width: 100%; and height: auto; by default, preventing them from overflowing their parent containers and maintaining their aspect ratio.
• Borders are Reset: All elements are given a solid, 0px, transparent border by default. This makes it so you only need to add a single class like border to add a 1px solid border with the default color.

Extending Preflight with Your Own Base Styles

If you want to define your own default styles for certain elements (e.g., make all links a certain color), you can add your own CSS to the base layer. This is the modern and recommended approach.

src/input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl font-bold;
  }
  h2 {
    @apply text-xl font-semibold;
  }
  a {
    @apply text-blue-600 underline hover:text-blue-800;
  }
  /* Accessibility tip: Ensure lists are announced correctly by screen readers */
  ul[role='list'],
  ol[role='list'] {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

Disabling Preflight

In rare cases, like when integrating Tailwind into a legacy project with existing CSS, you might need to disable Preflight to avoid conflicts. You can do this in your tailwind.config.js file.

Warning: Disabling Preflight is generally not recommended for new projects, as it’s a core part of the Tailwind CSS philosophy. You will lose the benefits of cross-browser consistency.

tailwind.config.js

module.exports = {
  // ... other config
  corePlugins: {
    preflight: false,
  }
}