Warna & Jarak

Rumus Tailwind itu gampang banget, polanya selalu sama: [Properti]-[Warna]-[Ketebalan]

1. Warna

Di Tailwind, lo gak cuma bilang "Merah". Lo harus spesifik: "Merah yang mana?". Mereka pake sistem angka 50 sampai 950 buat nentuin seberapa gelap warnanya.

• 50-100: Pucat banget (biasanya buat background tipis).
• 400-500: Standar (buat tombol atau icon).
• 800-900: Gelap pekat (buat teks biar kebaca).

Contoh Kode:

<div className="bg-red-100 text-red-900 border border-red-500">
  Background merah muda, Teks merah tua, Garis merah standar.
</div>

2. Spacing

Ini bagian yang sering bikin pemula "kesandung". Ingat rumus ini sampai mati: 1 Satuan Tailwind = 4 Pixel.

Kode Arah Mata Angin 🧭

Sama kayak CSS biasa, kita bisa atur sisi mana yang mau dikasih jarak (berlaku buat Padding p dan Margin m).

• p-4: Semua sisi (Atas, Bawah, Kiri, Kanan).

• px-4: Sumbu X (Kiri & Kanan).

• py-4: Sumbu Y (Atas & Bawah).

• pt-4: Top (Atas doang).

• ml-4: Margin Left (Kiri doang).

// Tombol Ganteng
<button className="py-2 px-4 bg-blue-500 text-white rounded">
  Atas-Bawah 8px, Kiri-Kanan 16px. Pas!
</button>

3. Typography

Lupakan font-size: 18px. Di Tailwind, kita pake ukuran baju.

• text-xs: Extra Small.
• text-sm: Small.
• text-base: Standar.
• text-lg: Large.
• text-xl sampai text-9xl: Judul Gede Banget.

Ketebalan (Weight)

• font-thin (Tipis kayak lidi).

• font-normal (Biasa).

• font-bold (Tebal / Bold).

• font-black (Tebal banget sampe tumpeh-tumpeh).

4. Ukuran Benda

Gimana ngatur lebar kotak? Tailwind pake Pecahan yang jenius.

• w-full: Lebar 100% .

• w-1/2: Lebar 50% .

• w-1/3: Lebar 33.3% .

• h-screen: Tinggi 100% Layar .

<div className="flex">
  <div className="w-1/2 bg-blue-500">Kiri (50%)</div>
  <div className="w-1/2 bg-red-500">Kanan (50%)</div>
</div>