Spacing & Sizing — Tailwind CSS

Tailwind menyediakan class untuk padding, margin, width, dan height. Padding: p-{n}, px-{n}, py-{n}, pt-{n}, pr-{n}, pb-{n}, pl-{n} Padding semua sisi 16px…

Spacing di Tailwind adalah class untuk jarak: padding (ruang di dalam elemen, antara isi dan pinggirnya) dan margin (jarak di luar elemen, ke tetangganya). Sizing adalah class untuk ukuran: lebar dan tinggi. Bayangin kardus paket di rak gudang. Bubble wrap di dalam kardus itu padding, celah antar kardus di rak itu margin, dan ukuran kardusnya itu width dan height. Semuanya diukur pakai satu penggaris yang garisnya tiap 4px.

🧪 Tebakan cepat: class="px-6 py-3". Padding kirinya berapa piksel, dan padding atasnya berapa? Tebak dulu, jawabannya ada di bagian "Arahnya ada di huruf kedua".

Satu langkah = 4px

Angka di belakang class spacing itu jumlah langkah. Satu langkah = 0.25rem = 4px (1rem = 16px, ukuran huruf bawaan browser).

Class	Langkah	rem	px
`p-1`	1	`0.25rem`	4px
`p-2`	2	`0.5rem`	8px
`p-3`	3	`0.75rem`	12px
`p-4`	4	`1rem`	16px
`p-6`	6	`1.5rem`	24px
`p-8`	8	`2rem`	32px

Tailwind v4 menghitungnya langsung: p-4 jadi padding: calc(var(--spacing) * 4), dan --spacing isinya 0.25rem. Karena itu angka apa pun jalan, termasuk p-13 (52px) dan setengah langkah seperti p-1.5 (6px). p-0 artinya nol.

Padding dan margin

p-* = padding: ruang di dalam. Latar elemennya ikut mengisi ruang ini.
m-* = margin: jarak di luar, ke elemen tetangga. Margin selalu transparan.

Sama seperti di CSS biasa, cuma ditulis sebagai class.

Arahnya ada di huruf kedua

Huruf	Artinya	Contoh	CSS yang dibuat
(tanpa)	semua sisi	`p-4`	`padding`
`x`	kiri dan kanan	`px-6`	`padding-inline`
`y`	atas dan bawah	`py-3`	`padding-block`
`t`	atas (top)	`mt-4`	`margin-top`
`r`	kanan (right)	`pr-2`	`padding-right`
`b`	bawah (bottom)	`mb-8`	`margin-bottom`
`l`	kiri (left)	`ml-1`	`margin-left`

padding-inline adalah padding di awal dan akhir baris teks, yaitu kiri dan kanan di halaman yang dibaca dari kiri ke kanan. padding-block adalah atas dan bawah. Contohnya kotak di latihan:

<div class="box px-6 py-3 mt-4">
  Kotak dengan spacing
</div>

box adalah class milikmu sendiri. Tailwind gak punya class box, jadi dia gak menambah gaya apa pun, tapi tetap boleh ada di sebelah class Tailwind.
px-6: padding kiri dan kanan 6 × 4px = 24px.
py-3: padding atas dan bawah 3 × 4px = 12px.
mt-4: margin atas 4 × 4px = 16px, jarak ke elemen di atasnya.

Jadi padding kirinya 24px dan padding atasnya 12px. Itu jawaban tebakannya.

Lebar dan tinggi

Class	CSS yang dibuat	Hasil
`w-32`	`width: calc(var(--spacing) * 32)`	128px
`h-10`	`height: calc(var(--spacing) * 10)`	40px
`size-10`	`width` dan `height` sekaligus	40px × 40px
`w-1/2`	`width: calc(1/2 * 100%)`	separuh lebar induknya
`w-full`	`width: 100%`	selebar induknya
`w-screen`	`width: 100vw`	selebar layar
`h-screen`	`height: 100vh`	setinggi layar
`max-w-md`	`max-width: var(--container-md)`	paling lebar 28rem (448px)

w-* dan h-* pakai skala 4px yang sama dengan padding.
mx-auto membagi sisa ruang kiri dan kanan sama rata, jadi max-w-md mx-auto menaruh blok selebar maksimal 448px di tengah.
Tailwind memasang box-sizing: border-box ke semua elemen lewat preflight, CSS dasar yang ikut masuk lewat @import "tailwindcss". Jadi w-32 itu 128px termasuk padding dan border-nya, beda dengan bawaan browser yang menambah padding di luar width.

⚠️ Jebakan yang sering ketemu

px dikira piksel. Di Tailwind px artinya padding-x, kiri dan kanan. px-24 itu 24 × 4px = 96px, bukan 24px. Buat 24px tulis px-6.
py dan pt ketuker. pt-3 cuma atas. Latihan ini minta atas dan bawah 12px, jadi py-3.
Class box dihapus. Latihan mengecek elemen .box. Tambahkan class Tailwind di sebelahnya: class="box px-6 py-3 mt-4".
Dua class untuk properti yang sama. p-4 p-8 di satu elemen: yang menang ditentukan urutan aturannya di CSS buatan Tailwind, bukan urutan di atribut class. Pasang satu saja.

TL;DR: Spacing di Tailwind ditulis {p atau m}{arah}-{angka}. p padding (di dalam), m margin (di luar). Arah: tanpa huruf semua sisi, x kiri-kanan, y atas-bawah, t r b l satu sisi. Angkanya langkah 4px: satu langkah = 0.25rem, jadi px-6 = 24px, py-3 = 12px, mt-4 = 16px. Lebar dan tinggi pakai w-* dan h-* dengan skala yang sama, plus w-full (100%), w-1/2 (50%), w-screen, max-w-md, dan mx-auto buat menengahkan. Di Tailwind semua elemen border-box, jadi padding dihitung di dalam lebarnya. Ingat, px di Tailwind artinya padding kiri-kanan, bukan piksel.