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.
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
- Sandbox
- Source Code on GitHub
Image by Melanie Thomas from Pixabay
Webmentions
Loading counts...
❤️ 0 💬 0
Fetching Replies...
There is no reply...