← 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...