← Go Back

Extending Tailwind CSS Preflight Normalization with Zero Padding

Broken Post?Let me know

Tailwind removes margins during Preflight (style normailzation).

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

Problem

There is no padding clearance, which can cause problem when specifying a 100vw screen width with w-screen.

//             👇
<div class="w-screen flex flex-col">
  <header class="h-32 bg-purple-200">Header</header>
  <section class="flex-auto lg:flex-row flex flex-col">
    <nav class="w-screen h-full lg:w-64 bg-blue-200">Menu</nav>
    <main class="flex-1 h-full bg-green-200">
      <p>...</p>
    </main>
    <aside class="w-screen h-full lg:w-64 bg-yellow-200">Adverts</aside>
  </section>
  <footer class="h-32 bg-red-200">Footer</footer>
</div>

You can see on the bottom that the page exceeds the screen width, showing a horizontal scrollbar.

symptom

Extending Preflight

We can extend the Preflight process in tailwind.css using CSS.

Make sure to place it
AFTER @tailwind base; but BEFORE @tailwind components;

@tailwind base;

/* 
  Tailwind doesn't apply padding:0, only margin: 0
  https://tailwindcss.com/docs/preflight/#extending-preflight 
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
p,
pre {
  @apply p-0;
}

@tailwind components;
@tailwind utilities;

Demo


Image by Melanie Thomas from Pixabay

Webmentions

Loading counts...

❤️ 0 💬 0

Fetching Replies...
There is no reply...