In a previous tip, I wrote at a high level why you should use containers and paddings to build responsive websites. This time around, I want to get a bit more technical with how to properly implement containers in TailwindCSS and sort of show why paddings are very important for building responsive websites.
Let's jump in.
Alright, so we all know that in TailwindCSS, we have a certain set of breakpoints given to us by default. What you may not know is that the container utility in TailwindCSS uses the exact same values as breakpoints for its max-width property. In other words, in TailwindCSS (assuming no edits to our tailwind.config.js file), our site will only ever have the following container sizes:
- 400px
- 768px
- 1024px
- 1280px
- 1536px
Let's take a step back and talk about why containers are important to begin with.
Let's say we're on a typical laptop (~1300px in width), without a container this is what we'll see (using the following HTML snippet as an example):
<section class="flex min-h-screen flex-col justify-center bg-slate-900 text-white">
<h1 class="text-6xl font-black">🚨 I'm touching the side of the page</h1>
</section>
Adding a container mx-auto, we get the following:
<section class="flex min-h-screen flex-col justify-center bg-slate-900 text-white">
<div class="container mx-auto">
<h1 class="text-6xl font-black">✅ Ahh much better</h1>
</div>
</section>
That's all fine, but what happens if we're on a device that is at the exact size as a breakpoint? We get something like this (in the case of 1280px):
That's not much better, that's not much better at all!
Since we're at 1280px, which is the breakpoint for xl in TailwindCSS, the max-width property of the container is set to 1280px. In other words, we're back to square one where it looks like we don't have a container at all.
This is where padding comes into play.
Padding helps us by adding negative space on all sides of an element in HTML. In this case, we actually want to apply padding to the section element, not the element with the container utility.
Something like this should suffice:
<section class="p-6 flex min-h-screen flex-col justify-center bg-slate-900 text-white">
<div class="container mx-auto">
<h1 class="text-6xl font-black">✅ Ahh much better</h1>
</div>
</section>Taking a look now:
You can see by adding a p-6 we've essentially saved the design and guaranteed that, at breakpoints, we have some sort of negative spacing around all sides of the container.
Now, I want to challenge you and ask, why did we put p-6 on the section and not on the container 🤔. Take a moment to think about it.
Got it? The answer is that we don't want to effect the max-width of the container utility. By inserting a padding into the same div as the container utility, we essentially tell that div to span to the max-width that container defines plus add an additional constraint with the padding. By applying padding to the section, we only apply padding to the edges of the section and leave the container intact.
Let's look at a box-model to prove that this is what's happening:
In a super zoomed out view, we see that padding is applied to the section on the very edges, this is what we want because if we inspect the container:
We see that the size, 1536, is unaffected.
There you have it, this is how you effectively use containers and paddings in TailwindCSS!
