Preflight

One of the first things you'll notice about Tailwind CSS is that it resets your CSS styles. If you're used to other reset, you'll notice that Tailwind seems a little more...greedy about how it resets.

Preflight

• Margins removed
• Unstyled headings
• List unstyled
• Block images
• Borders reset

Try it
Docs

Let's talk about the things that Tailwind CSS does when it resets.

First, all margins are removed from almost everything: paragraphs, headlines, blockquotes and more.

Headings are set to unstyled. You notice immediately, that all the text uses a sans serif font instead of the real ugly serif font that browsers normally use. Also links don't have any underlines

Lists are also unstyled, so no margins, padding, or even a list style, so they don't even get the default bullets.

Images are normally inline elements, so they are set to be block elements. You can see that these are pretty reasonable settings.

Any border styles are also reset, so things don't have borders by default on Tailwind CSS.

Turning It Off

tailwind.config = {
  corePlugins: {
    preflight: false
  }
}

Try it

You can turn this behavior off by modifying your configuration file and turning preflight off in the core plugins. Notice that I'm doing it here by targeting a variable called tailwind.confg while I'm using the play CDN.

Customizing

<style type="text/tailwindcss">
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  @layer base {
    h1 {
      @apply text-4xl text-orange-500 mt-1;
    }
    h2 {
      @apply text-xl text-indigo-500 mt-3;
    }
  }
</style>

Try it

You can also customize any of the values in preflight. They're store in the base section of the CSS.

If you're using the Play CDN like I'm doing here notice that I added a style tag with a type of text/tailwind/css type. Normally you don't have to do that in your CSS file. And normally in Codepen, I would just add that to the CSS tab, but because of this type, I need to add this in here.

Using the @apply method, I can then add Tailwind CSS classes to each of my tags.