Tailwind removes margins during Preflight (style normailzation).

1blockquote,2dl,3dd,4h1,5h2,6h3,7h4,8h5,9h6,10figure,11p,12pre {13  margin: 0;14}

Problem

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

1//             👇2<div class="w-screen flex flex-col">3  <header class="h-32 bg-purple-200">Header</header>4  <section class="flex-auto lg:flex-row flex flex-col">5    <nav class="w-screen h-full lg:w-64 bg-blue-200">Menu</nav>6    <main class="flex-1 h-full bg-green-200">7      <p>...</p>8    </main>9    <aside class="w-screen h-full lg:w-64 bg-yellow-200">Adverts</aside>10  </section>11  <footer class="h-32 bg-red-200">Footer</footer>12</div>

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

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;

1@tailwind base;2
3/* 4  Tailwind doesn't apply padding:0, only margin: 05  https://tailwindcss.com/docs/preflight/#extending-preflight 6*/7blockquote,8dl,9dd,10h1,11h2,12h3,13h4,14h5,15h6,16figure,17p,18pre {19  @apply p-0;20}21
22@tailwind components;23@tailwind utilities;

Demo

• Sandbox
• Source Code on GitHub

---

Image by Melanie Thomas from Pixabay