Tailwind CSS
Jurus Dasar

Jurus Dasar: Warna & Jarak 🎨

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

1. Warna (The 50-900 Scale) 🌈

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>
💡
Wajib Install: Pasang ekstensi "Tailwind CSS IntelliSense" di VS Code lo. Nanti pas lo ngetik bg-blue-, dia bakal munculin palet warnanya lengkap. Gak usah dihafal mati!

2. Spacing (Angka Keramat "4") 📏

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

ClassPixelAnalogi
p-14pxDikit banget (seujung kuku).
p-28pxLumayan.
p-416pxStandar Emas (Jarak paling pas).
p-832pxLega banget.
p-00pxGak ada jarak.
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 (Ukuran Kaos) 👕

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

  • text-xs: Extra Small (Kecil banget, buat syarat & ketentuan).

  • text-sm: Small (Buat caption instagram).

  • text-base: Standar (Ukuran default browser).

  • text-lg: Large (Sub-judul).

  • text-xl sampai text-9xl: Judul Gede Banget (Billboard).

Ketebalan (Weight)

  • font-thin (Tipis kayak lidi).

  • font-normal (Biasa).

  • font-bold (Tebal / Bold).

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

4. Ukuran Benda (Pecahan Matematika) 🍰

Gimana ngatur lebar kotak? Tailwind pake Pecahan yang jenius.

  • w-full: Lebar 100% (Mentok).

  • w-1/2: Lebar 50% (Setengah Layar).

  • w-1/3: Lebar 33.3% (Sepertiga Layar).

  • h-screen: Tinggi 100% Layar (Full satu layar HP/Laptop).

 
<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>
🎉

Cheat Sheet: Jangan panik kalau lupa. Ketik aja bahasa Inggrisnya di VS Code.

  • Mau miring? Ketik italic.

  • Mau garis bawah? Ketik underline.

  • Mau bayangan? Ketik shadow.

Tailwind itu bahasanya manusiawi banget kok!

Bye Bye CSS RibetResponsive