Skala spacing Tailwind
Angka pada kelas Tailwind mengikuti skala tetap: 1 satuan = 0,25rem = 4px. Jadi p-2 = 8px, p-4 = 16px, p-8 = 32px. Skala terbatas ini justru kelebihannya — desain jadi konsisten karena tidak ada lagi campuran 13px, 15px, 17px yang muncul saat semua orang bebas memilih angka. Kalau kamu benar-benar butuh nilai di luar skala, Tailwind menyediakan sintaks kurung siku seperti p-[13px] — pakai seperlunya, karena di situlah konsistensi mulai bocor.
👀 Contoh dulu
<!-- p-2=8px p-4=16px p-8=32px (kelipatan 4px) --> <div class="p-3 mt-2 rounded shadow-sm">Kartu kecil</div> <!-- arah spesifik: t=top r=right b=bottom l=left, x=kiri-kanan, y=atas-bawah --> <div class="px-4 py-2">Padding horizontal 16px, vertikal 8px</div>
Hasilnya: Kartu pertama padding 12px dengan sudut sedikit membulat; kartu kedua padding berbeda antara sisi.
💡 Rumus: angka × 4px. Jadi p-3 = 12px, mt-2 = margin-top 8px, px-4 = padding kiri & kanan 16px.
📝 Sekarang giliranmu
Buat kartu dengan p-6 (24px), mb-4 (margin bawah 16px), rounded-lg, dan shadow-md.