Mulai "Dandanin" Elemen: Jurus Styling Dasar Pake Utility Tailwind!

Udah ngerti kan konsep utility-first di Tailwind CSS? Keren! Sekarang, saatnya kita liat gimana cara pake "kepingan LEGO" utility itu buat ngasih style dasar ke elemen-elemen HTML kita.

Tailwind nyediain banyaaak banget utility class yang udah siap pake buat ngatur hampir semua properti CSS yang umum. Kita bakal bahas beberapa kategori yang paling fundamental dulu ya. Jangan lupa, dokumentasi resmi Tailwind CSS (tailwindcss.com/docs) adalah teman terbaikmu buat nyari utility spesifik!

Ingat, kita masih pake setup CDN @tailwindcss/browser@4 dari materi sebelumnya, jadi semua contoh ini bisa langsung kamu coba di file HTML-mu.

1. Spacing (Jarak): Padding & Margin

Ngatur jarak antar elemen atau jarak dalem elemen itu krusial buat layout yang enak diliat. Tailwind punya skala spacing default yang konsisten (biasanya kelipatan 4px, di mana 1 unit Tailwind itu 0.25rem atau 4px jika font size dasar 16px).

• Padding (p-, pt-, pr-, pb-, pl-, px-, py-):

  • p-{size}: Padding di semua sisi. Contoh: p-4 (padding 1rem/16px).
  • pt-{size}: Padding atas (padding-top). Contoh: pt-2 (padding atas 0.5rem/8px).
  • pr-{size}: Padding kanan (padding-right).
  • pb-{size}: Padding bawah (padding-bottom).
  • pl-{size}: Padding kiri (padding-left).
  • px-{size}: Padding horizontal (kiri DAN kanan). Contoh: px-6 (padding kiri & kanan 1.5rem/24px).
  • py-{size}: Padding vertikal (atas DAN bawah). Contoh: py-3 (padding atas & bawah 0.75rem/12px).
  • Nilai {size}-nya ngikutin skala default Tailwind (0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, ..., 96, dll.). Cek dokumentasi buat skala lengkapnya. Kamu juga bisa pake nilai arbitrer: p-[17px].

• Margin (m-, mt-, mr-, mb-, ml-, mx-, my-):

  • Sintaksnya sama persis kayak padding, cuma depannya m buat margin.
  • Contoh: m-8 (margin 2rem/32px di semua sisi), mt-4 (margin atas 1rem/16px), mx-auto (margin horizontal otomatis, sering buat ngenengahin elemen block).

Contoh Spacing:

<div class="bg-slate-200 p-6"> <!-- Padding di semua sisi div -->
  <h2 class="text-xl font-bold mb-4">Judul dengan Margin Bawah</h2> <!-- Margin bawah -->
  <p class="py-2 px-3 bg-white">Paragraf dengan padding vertikal dan horizontal.</p>
</div>
 
<div class="w-1/2 bg-sky-500 mx-auto my-8 p-4"> <!-- Lebar 50%, margin horizontal auto (ke tengah), margin vertikal, padding -->
  Blok ini di tengah halaman.
</div>

• Space Between (Jarak Antar Elemen Anak - space-x-, space-y-):

  • Buat ngasih jarak antar elemen anak yang dijejerin (biasanya item flex atau grid, tapi bisa juga buat elemen block biasa). Dia nambahin margin ke semua anak kecuali yang pertama.
  • space-x-{size}: Ngasih margin-left ke semua anak kecuali yang pertama (kalau flex-direction: row).
  • space-y-{size}: Ngasih margin-top ke semua anak kecuali yang pertama (kalau flex-direction: column).
  • Catatan v4.0: Implementasi selector space-x/y diubah di v4 untuk performa, sekarang menggunakan margin-bottom untuk space-y jika anak terakhir bukan :last-child dan margin-right untuk space-x. Jika ini menyebabkan masalah, disarankan migrasi ke layout flex/grid dengan properti gap.

  <div class="flex space-x-4"> <!-- Item flex dengan jarak horizontal 1rem -->
    <div class="bg-red-300 p-2">Anak 1</div>
    <div class="bg-green-300 p-2">Anak 2</div>
    <div class="bg-blue-300 p-2">Anak 3</div>
  </div>

  Untuk layout modern, lebih disarankan pake gap-{size} kalau kamu udah pake flex atau grid di parent-nya (dibahas di materi layout).

2. Sizing (Ukuran): Width & Height

Ngatur lebar dan tinggi elemen.

• Width (w-):

  • w-{size}: Lebar berdasarkan skala (misal, w-16 itu 4rem).
  • w-px: Lebar 1px.
  • w-1/2, w-1/3, w-2/3, w-1/4, w-3/4, w-1/5, ..., w-11/12: Lebar persentase (misal, w-1/2 itu width: 50%;).
  • w-full: width: 100%;.
  • w-screen: width: 100vw; (lebar penuh viewport).
  • w-min: width: min-content;.
  • w-max: width: max-content;.
  • w-fit: width: fit-content;.
  • w-auto: width: auto;.
  • Nilai arbitrer: w-[300px].

• Height (h-):

  • Sintaksnya mirip w-, tapi buat tinggi (h-16, h-full, h-screen, h-[200px], dll.).

• Min/Max Width & Height:

  • min-w-*, max-w-* (misal, max-w-md, min-w-0).
  • min-h-*, max-h-* (misal, min-h-screen).

Contoh Sizing:

<div class="w-full h-32 bg-indigo-300">Lebar penuh, tinggi 8rem (32*0.25rem)</div>
<div class="flex mt-4">
  <div class="w-1/3 h-24 bg-pink-300">Sepertiga Lebar</div>
  <div class="w-2/3 h-24 bg-amber-300">Dua Pertiga Lebar</div>
</div>
<img src="https://via.placeholder.com/400" alt="Gambar" class="w-64 max-w-full h-auto mt-4"> 
<!-- Gambar lebar 16rem, tapi gak akan lebih lebar dari parentnya, tinggi otomatis -->

3. Typography (Tipografi)

Ngatur tampilan teks.

• Font Family (font-sans, font-serif, font-mono):

  • Ngeset font-family ke tumpukan font sans-serif, serif, atau monospace default Tailwind (yang bisa kamu kustomisasi).
  • Contoh: font-sans.

• Font Size (text-{size}):

  • Skala ukuran font dari text-xs (extra small), text-sm (small), text-base (default, biasanya 1rem/16px), text-lg (large), text-xl, text-2xl, ..., text-9xl.
  • Nilai arbitrer: text-[17px].

• Font Weight (font-thin, font-extralight, font-light, font-normal, font-medium, font-semibold, font-bold, font-extrabold, font-black):

  • Ngatur ketebalan font.

• Font Style (italic, not-italic):

  • Bikin teks miring atau normal.

• Text Color (text-{color}-{shade}):

  • Ngubah warna teks. {color} itu nama warna dari palet Tailwind (misal, red, blue, green, gray, indigo), {shade} itu tingkatannya (biasanya dari 50 atau 100 sampe 900 atau 950, makin gede makin gelap/pekat).
  • Contoh: text-red-500, text-gray-700.
  • Ada juga text-black, text-white, text-transparent.
  • Opacity modifier: text-blue-500/75 (warna biru dengan opacity 75%).

• Text Alignment (text-left, text-center, text-right, text-justify):

  • Ngatur perataan teks horizontal.

• Line Height (leading-{size/name}):

  • Ngatur jarak antar baris. Skalanya pake nama (leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, leading-loose) atau angka (misal, leading-6 itu line-height: 1.5rem;).

• Letter Spacing (tracking-{name}): tracking-tighter, tracking-tight, tracking-normal, tracking-wide, tracking-wider, tracking-widest.

• Text Decoration (underline, overline, line-through, no-underline).

• Text Transform (uppercase, lowercase, capitalize, normal-case).

• Dan banyak lagi! Cek dokumentasi "Typography".

Contoh Tipografi:

<h1 class="font-serif text-4xl font-bold text-purple-700 tracking-tight">Judul Keren Sekali</h1>
<p class="font-sans text-base text-gray-800 leading-relaxed mt-2">
  Ini adalah paragraf dengan font sans-serif, ukuran dasar, warna abu-abu, dan spasi baris yang nyaman. 
  <a href="#" class="text-blue-600 underline hover:text-blue-800">Ini sebuah link</a>.
</p>

4. Backgrounds

• Background Color (bg-{color}-{shade}):
  • Sama kayak text-color, tapi buat background. Contoh: bg-green-100, bg-slate-800.
  • Opacity modifier: bg-teal-500/50.
• Background Image, Repeat, Position, Size:
  • Tailwind gak nyediain utility class spesifik buat background-image: url(...) secara default (karena URL-nya dinamis). Kamu biasanya nambahin ini pake CSS custom atau inline style, atau bikin utility kustom.
  • Tapi, buat background-repeat, background-position, background-size ada utility-nya:
    • bg-no-repeat, bg-repeat, bg-repeat-x, bg-repeat-y, bg-repeat-round, bg-repeat-space.
    • bg-bottom, bg-center, bg-left, bg-left-bottom, bg-left-top, bg-right, bg-right-bottom, bg-right-top, bg-top.
    • bg-auto, bg-cover, bg-contain.
• Gradients:
  • Tailwind punya utility buat bikin gradient dengan gampang!
  • bg-gradient-to-{direction}: Nentuin arah gradient (t atas, r kanan, b bawah, l kiri, tr kanan atas, dll.). Contoh: bg-gradient-to-r.
  • from-{color}-{shade}: Warna awal gradient.
  • via-{color}-{shade} (Opsional): Warna tengah gradient.
  • to-{color}-{shade}: Warna akhir gradient.

  <div class="h-32 bg-gradient-to-r from-cyan-500 via-sky-500 to-blue-500">
    Gradient Keren!
  </div>

5. Borders

• Border Width (border, border-{side}, border-{size} atau border-{side}-{size}):
  • border: Ngasih border 1px di semua sisi (defaultnya warna currentColor atau sesuai konfigurasi tema v4, jadi biasanya perlu border-gray-200 atau warna lain).
  • border-t, border-r, border-b, border-l: Border di sisi spesifik (top, right, bottom, left).
  • border-2, border-4, border-8: Ketebalan border (misal, border-2 itu 2px).
  • border-t-4: Border atas 4px.
• Border Color (border-{color}-{shade}):
  • Ngatur warna border. Contoh: border-red-500, border-black/50 (dengan opacity).
  • Ingat, di v4 defaultnya currentColor, jadi seringkali kamu perlu nambahin class warna border.
• Border Style (border-solid, border-dashed, border-dotted, border-double, border-none).
• Border Radius (rounded, rounded-{size}, rounded-{corner}-{size}):
  • rounded-sm, rounded (ini jadi rounded-sm di v4), rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl, rounded-full.
  • rounded-t-lg (sudut atas kiri & kanan aja yang large), rounded-r-full (sudut kanan atas & bawah full).
  • Nilai arbitrer: rounded-[10px].

Contoh Border:

<div class="border-2 border-dashed border-purple-500 rounded-xl p-4">
  Konten dengan border putus-putus ungu dan sudut sangat melengkung.
</div>

6. Shadows & Other Effects

• Box Shadow (shadow-{size/name}):
  • Skala shadow di v4: shadow-xs, shadow-sm, shadow (ini jadi shadow-md di v3), shadow-md, shadow-lg, shadow-xl, shadow-2xl, shadow-inner, shadow-none.
  • Contoh: shadow-lg.
• Opacity (opacity-{value}):
  • opacity-0, opacity-25, opacity-50, opacity-75, opacity-100.
  • Nilai arbitrer: opacity-[.85].

Contoh Efek:

<button class="bg-white p-3 rounded-md shadow-lg hover:shadow-xl transition-shadow">
  Tombol dengan Bayangan
</button>

Ini baru sebagian kecil dari utility class yang disediain Tailwind! Tapi, dengan nguasain kategori-kategori dasar ini (Spacing, Sizing, Typography, Backgrounds, Borders, Effects), kamu udah bisa mulai ngebangun banyak banget tampilan UI yang keren.

Ingat, jangan coba ngafalin semua class. Kuncinya adalah:

1. Pahamin pola penamaannya (misal, p itu padding, bg itu background, angka di belakangnya itu skala).
2. Jadi teman akrab sama dokumentasi resmi Tailwind CSS. Itu "kamus"-mu.
3. Banyak praktik! Coba bikin ulang komponen UI sederhana pake Tailwind.

Di materi berikutnya, kita bakal liat gimana Tailwind ngebantu kita ngatur layout pake utility Flexbox dan Grid.