Panduan Dasar Tailwind CSS untuk Pemula Part 2

3. Konsep Inti yang Harus Dikuasai

Ini adalah "balok LEGO" yang paling sering digunakan untuk layout.

a. Spasi & Ukuran (Padding, Margin, Width, Height)

• Padding (jarak dalam): p-{ukuran}

p-4 = padding 1rem (16px)
px-4 = padding kiri & kanan
py-2 = padding atas & bawah
pt-4 = padding atas (top)
pr-4 = padding right/kanan
pb-4 = padding bottom/bawah
pl-4 = padding left/kiri

• Margin (jarak luar): m-{ukuran} Sama seperti padding, m-4, mx-auto (untuk membuat elemen rata tengah secara horizontal), my-4, dll.
• Ukuran (Width & Height):

w-full = lebar 100%
w-1/2 = lebar 50%
w-64 = lebar 256px (ukuran tetap)
h-screen = tinggi 100% dari layar

Skala Angka: 1=4px, 2=8px, 3=12px, 4=16px, 5=20px, 6=24px, dan seterusnya.

b. Warna & Latar Belakang (Colors & Backgrounds)

• Latar Belakang: bg-{color}-{tone}

bg-white
bg-black
bg-gray-100 (abu-abu sangat muda), 
bg-gray-500 (abu-abu sedang),
bg-gray-900 (abu-abu gelap)
bg-blue-500, 
bg-red-500, 
bg-green-500

• Warna Teks: text-{color}-{tone}

text-white
text-gray-700
text-blue-600

c. Tipografi (Font)

• Ukuran Teks: text-{size}

text-sm (kecil)
text-base (standar)
text-lg (sedang)
text-xl (besar)
text-3xl (sangat besar)

• Ketebalan Font: font-{weight}

font-light
font-normal
font-medium
font-semibold
font-bold

• Perataan Teks:

text-left
text-center
text-right