Tailwind CSS Spacing and Sizing
Spacing and sizing classes use the same number scale, so space and size in your design always fit together.
Padding
Padding classes start with p. A second letter picks the sides.
| Class | Sides |
|---|---|
p-4 | All sides |
px-4 | Left and right (x axis) |
py-4 | Top and bottom (y axis) |
pt-4, pr-4, pb-4, pl-4 | Top, right, bottom, left |
Margin
Margin classes work the same way with m: m-4, mx-4, my-4, mt-4 and so on. mx-auto centres a block that has a width.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100">
<div class="bg-white max-w-md mx-auto mt-10 p-8 rounded-lg shadow-md">
<h2 class="text-xl font-bold mb-4">Student Login</h2>
<input class="w-full border border-gray-300 rounded-md px-3 py-2 mb-3" placeholder="Roll number">
<input class="w-full border border-gray-300 rounded-md px-3 py-2 mb-5" type="password" placeholder="Password">
<button class="w-full bg-cyan-600 text-white py-2 rounded-md">Log in</button>
</div>
</body>
</html>Space Between Children
space-y-4 adds space between stacked children, and space-x-4 adds it between children in a row. It does not add space before the first child or after the last.
Example
<ul class="space-y-2">
<li>Ali</li>
<li>Ayesha</li>
<li>Bilal</li>
</ul>Inside flex and grid layouts, gap-4 does the same job and is usually the better choice.
Width
| Class | Width |
|---|---|
w-16 | 4rem (64px), from the spacing scale |
w-1/2, w-1/3, w-2/3 | Fractions of the parent |
w-full | 100% of the parent |
w-screen | The full screen width |
w-auto | The browser decides |
w-fit | As wide as the content |
Height
Height uses the same values with h-: h-16, h-full, h-screen. min-h-screen is very common; it makes a page at least as tall as the screen.
Maximum Width
max-w-* classes stop content getting too wide on big screens.
| Class | Max width |
|---|---|
max-w-sm | 24rem (384px) |
max-w-md | 28rem (448px) |
max-w-xl | 36rem (576px) |
max-w-4xl | 56rem (896px) |
max-w-prose | About 65 characters, good for text |
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="p-6 space-y-3">
<div class="w-1/4 bg-cyan-200 p-2">w-1/4</div>
<div class="w-1/2 bg-cyan-300 p-2">w-1/2</div>
<div class="w-3/4 bg-cyan-400 p-2">w-3/4</div>
<div class="w-full bg-cyan-500 p-2 text-white">w-full</div>
<div class="w-32 h-32 bg-amber-300 rounded-full flex items-center justify-center">w-32 h-32</div>
</body>
</html>Size: Width and Height Together
size-12 sets both width and height to 3rem. It is a quick way to make squares and circles, such as avatars and icons.
Think in the scale: 2, 4, 6, 8, 12, 16. If you always pick from these few numbers, your page will have a calm, even rhythm.
Exercise
Exercise
Which class adds padding only on the left and right?