Bangun layout yang kompleks dengan mudah! Pelajari cara menggunakan utility classes Tailwind CSS untuk menerapkan Flexbox dan Grid, mengatur perataan, urutan, dan celah antar elemen.
Udah jago ngasih style dasar pake utility Tailwind? Keren! Sekarang, gimana caranya kita nyusun elemen-elemen itu biar tampil rapi di halaman? Entah itu mau dijejerin horizontal, vertikal, atau bahkan dibikin jadi kisi-kisi (grid) yang kompleks.
Nah, kamu pasti inget kan sama "superhero" layouting di CSS murni: Flexbox dan CSS Grid? Kabar baiknya, Tailwind CSS nyediain utility class yang super intuitif buat ngaktifin dan ngontrol Flexbox dan Grid ini langsung dari HTML-mu! Gak perlu lagi nulis banyak properti di file CSS terpisah buat layout dasar.
1. Display Utilities: "Sifat" Dasar Elemen ala Tailwind
Sebelum masuk ke Flexbox atau Grid, inget lagi soal properti display. Tailwind punya utility buat ini:
block: Bikin elemen jadi display: block; (mulai baris baru, lebar penuh).
inline-block: Bikin elemen jadi display: inline-block; (sejajar tapi bisa diatur width/height).
inline: Bikin elemen jadi display: inline; (sejajar, lebar sesuai konten).
hidden: Sama kayak display: none; (elemen ilang total dari layout).
flex: Nah, ini buat ngaktifin Flexbox Container! Sama kayak display: flex;.
inline-flex: Bikin Flex Container yang sifatnya inline.
grid: Ini buat ngaktifin Grid Container! Sama kayak display: grid;.
inline-grid: Bikin Grid Container yang sifatnya inline.
Dan ada beberapa lagi (table, flow-root, dll. yang lebih jarang dipake pemula).
Kamu tinggal tambahin class ini ke elemen parent yang mau kamu jadiin Flex atau Grid Container.
html
<div class="flex ..."> <!-- Ini jadi Flex Container --> <!-- Anak-anaknya otomatis jadi Flex Items --></div><div class="grid ..."> <!-- Ini jadi Grid Container --> <!-- Anak-anaknya otomatis jadi Grid Items --></div><span class="block bg-blue-200 p-2">Span ini jadi kayak Div</span><div class="inline bg-red-200 p-2">Div ini jadi kayak Span</div>
2. Flexbox Utilities: Ngatur Item Satu Dimensi Jadi Gampang!
Tailwind bikin pake Flexbox jadi kerasa alami banget. Sebagian besar properti Flexbox Container dan Flex Item punya padanan utility class-nya.
a. Untuk Flex Container (Elemen Parent)
flex-row: flex-direction: row; (default kalau kamu cuma nulis flex). Item dijejer horizontal.
flex-wrap: flex-wrap: wrap; (Item boleh turun baris).
flex-wrap-reverse: flex-wrap: wrap-reverse;
flex-nowrap: flex-wrap: nowrap; (Default, item dipaksa satu baris).
justify-start: justify-content: flex-start;
justify-end: justify-content: flex-end;
justify-center: justify-content: center;
justify-between: justify-content: space-between;
justify-around: justify-content: space-around;
justify-evenly: justify-content: space-evenly;
items-start: align-items: flex-start;
items-end: align-items: flex-end;
items-center: align-items: center;
items-baseline: align-items: baseline;
items-stretch: align-items: stretch; (Default).
content-start, content-end, content-center, content-between, content-around, content-evenly, content-stretch: Ini buat align-content, cuma ngefek kalau flex-wrap: wrap; dan ada beberapa baris item.
gap-{size}, gap-x-{size}, gap-y-{size}: Buat ngasih jarak (gap) antar flex items. JAUH LEBIH GAMPANG daripada pake margin di tiap item! {size} ngikutin skala spacing Tailwind.
Contoh: gap-4 (gap 1rem di semua arah), gap-x-2 (gap horizontal 0.5rem), gap-y-8 (gap vertikal 2rem).
Contoh Flexbox Container:
html
<!-- Menu navigasi horizontal di tengah dengan jarak --><nav class="flex justify-center gap-x-6 py-4 bg-slate-100"> <a href="#" class="hover:text-blue-500">Beranda</a> <a href="#" class="hover:text-blue-500">Produk</a> <a href="#" class="hover:text-blue-500">Kontak</a></nav><!-- Kartu-kartu yang dijejer dan bisa wrap, item di tengah vertikal --><div class="flex flex-wrap justify-around items-center gap-4 p-4 bg-gray-200 min-h-[200px]"> <div class="bg-white p-4 rounded shadow w-40 text-center">Kartu 1</div> <div class="bg-white p-4 rounded shadow w-40 text-center">Kartu 2 Lebih Tinggi</div> <div class="bg-white p-4 rounded shadow w-40 text-center">Kartu 3</div> <div class="bg-white p-4 rounded shadow w-40 text-center">Kartu 4</div></div>
3. Grid Utilities: Arsitek Layout Dua Dimensi Versi Cepat!
Tailwind juga bikin CSS Grid jadi gampang dipake.
a. Untuk Grid Container
grid-cols-{number}: Nentuin jumlah kolom dengan lebar yang sama. Misal, grid-cols-3 bikin 3 kolom sama lebar (kayak 1fr 1fr 1fr). Maksimal biasanya sampe grid-cols-12.
grid-cols-none: grid-template-columns: none;.
grid-rows-{number}: Nentuin jumlah baris dengan tinggi yang sama (atau implisit).
grid-flow-row, grid-flow-col, grid-flow-row-dense, grid-flow-col-dense: Buat grid-auto-flow.
gap-{size}, gap-x-{size}, gap-y-{size}: Sama kayak di Flexbox, buat jarak antar sel grid.
justify-items-* (start, end, center, stretch).
align-items-* (start, end, center, stretch, baseline).
place-items-* (shorthand buat align-items dan justify-items).
(Untuk grid-template-columns dan grid-template-rows yang lebih kustom (misal, 200px 1fr auto), kamu bisa pake nilai arbitrer: grid-cols-[200px_1fr_auto]).
<div class="relative h-32 w-full bg-slate-200 p-4"> Ini parent relatif. <div class="absolute bottom-0 right-0 bg-red-400 p-2 rounded"> Anak absolut di pojok kanan bawah. </div></div><div class="sticky top-0 bg-yellow-300 p-2 z-10"> <!-- Akan nempel di atas pas scroll --> Header Nempel!</div>
5. Z-Index (z-{index})
Buat ngatur tumpukan elemen yang diposisikan.
z-0, z-10, z-20, z-30, z-40, z-50, z-auto.
Nilai arbitrer: z-[999].
Dengan utility Flexbox dan Grid dari Tailwind, ngatur layout jadi kerasa lebih cepet dan intuitif karena kamu bisa langsung liat efeknya di HTML. Gak perlu bolak-balik file CSS buat ngubah display, justify-content, atau grid-template-columns lagi.
Kuncinya adalah pahamin konsep dasar Flexbox dan Grid di CSS murni dulu (yang udah kita pelajari!), terus liat gimana Tailwind "nerjemahin" properti-properti itu jadi utility class yang gampang dipake. Dokumentasi Tailwind lagi-lagi jadi teman terbaikmu buat nyari utility spesifik.
Selanjutnya, kita bakal liat gimana cara bikin layout Tailwind ini jadi responsif di berbagai ukuran layar!
Checkpoint KuisTarget: 70%
Kuis Layouting dengan Tailwind CSS
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
