Day 3 - Containers & Spacing

Control layout width, centering, padding and margin with Tailwind utilities.

---

1. The container Class

The container class sets max-width to match the current breakpoint. Add mx-auto to center it and px-4 for horizontal padding:

<div class="container mx-auto px-4">
  Your centered content here
</div>

---

2. Max-Width Utilities

Use max-w-{size} to constrain element widths. Combine with mx-auto to center:

---

3. Container Breakpoints

The container class automatically sets max-width at each breakpoint:

---

4. Spacing — Padding & Margin

Tailwind uses shorthand: {property}{sides}-{size}

Padding Demo

Common Spacing Classes