Styling Dasar dengan Tailwind | Dasar Tailwind CSS v4.0 | Mahir.dev | Mahir.dev Academy

Styling Dasar dengan Tailwind | Dasar Tailwind CSS v4.0 | Mahir.dev | Mahir.dev Academy

p-

pt-

pr-

pb-

pl-

px-

py-

html

<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.
html
```
<div class="flex space-x-4"> 
  <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).

html

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

html

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

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.
html
```
<div class="h-32 bg-gradient-to-r from-cyan-500 via-sky-500 to-blue-500">
  Gradient Keren!
</div>
```