Komponen responsif mengubah susunannya sesuai ruang yang ada. Navbar yang sama bisa menyembunyikan link-nya di HP dan menampilkannya di laptop, cukup dengan prefix seperti md:. Bayangin rak sepatu. Di kamar kos yang sempit, sepatunya disusun bertumpuk ke atas. Di teras yang lebar, sepatunya dijajarkan ke samping. Sepatunya sama, susunannya ikut tempat.
🧪 Tebakan cepat: tombol Menu diberi
md:hidden. Tombolnya hilang di layar yang lebih sempit dari 768px, atau di layar 768px ke atas? Tebak dulu, jawabannya ada di bagian "Mobile-first: tanpa prefix dulu".
Navbar dasar: logo kiri, link kanan
Ini navbar yang dicek latihan:
<nav id="navbar" class="flex items-center justify-between p-4">
<span>Logo</span>
<div class="flex gap-4">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</nav>
| Class | CSS yang dihasilkan | Artinya |
|---|---|---|
flex |
display: flex; |
Logo dan grup link berjajar |
items-center |
align-items: center; |
rata tengah dari atas ke bawah |
justify-between |
justify-content: space-between; |
Logo nempel kiri, grup link nempel kanan |
p-4 |
padding: 1rem; |
jarak dalam 16px |
gap-4 |
gap: 1rem; |
jarak 16px antar link |
- Tiga class pertama dipasang di
<nav>, induknya. Anak-anaknya ikut diatur. - Grup link punya
flex gap-4sendiri, supaya tiga link-nya berjajar dengan jarak 16px. - Latihannya mengecek
display: flex,align-items: center,justify-content: space-betweendi#navbar, dan minimal 3 link<a>di dalamnya.
Mobile-first: tanpa prefix dulu
Class tanpa prefix berlaku di semua lebar layar, mulai dari HP. Class dengan prefix baru berlaku mulai lebar tertentu ke atas:
| Prefix | Berlaku mulai | CSS-nya |
|---|---|---|
| (tanpa) | 0px, semua layar | aturan biasa |
sm: |
640px | @media (width >= 40rem) |
md: |
768px | @media (width >= 48rem) |
lg: |
1024px | @media (width >= 64rem) |
xl: |
1280px | @media (width >= 80rem) |
Ini navbar di Lab. Di HP, link-nya disembunyikan dan diganti tombol Menu:
<nav id="navbar" class="flex items-center justify-between p-4">
<span class="font-bold text-lg md:text-xl lg:text-2xl">Logo</span>
<button class="md:hidden">Menu</button>
<div class="hidden md:flex gap-4">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</nav>
| Lebar layar | Tombol Menu | Grup link | Ukuran Logo |
|---|---|---|---|
| 360px | tampil | tersembunyi (hidden) |
18px (text-lg) |
| 768px | tersembunyi (md:hidden) |
tampil (md:flex) |
20px (md:text-xl) |
| 1024px | tersembunyi | tampil | 24px (lg:text-2xl) |
hidden md:flex: tersembunyi di HP, jadi flex mulai 768px.md:hidden: tampil di HP, hilang mulai 768px. Itu jawaban tebakannya:md:hiddenmenyembunyikan tombol di layar 768px ke atas. Prefix selalu berarti "mulai lebar ini", gak pernah "sampai lebar ini".text-lg md:text-xl lg:text-2xl: Logo membesar di tiap breakpoint. Yang tanpa prefix untuk HP, yang lain menimpanya di layar yang lebih lebar.- Tepat di 768px,
md:sudah berlaku, karena aturannya "minimal 768px".
Container query: ikut lebar wadah, bukan layar
md: selalu bertanya ke lebar layar. Itu jadi masalah untuk komponen yang dipasang di banyak tempat. Di layar 800px, kartu di sidebar 256px dan kartu di konten utama 496px sama-sama melihat "layarnya 800px", jadi kartu di sidebar ikut berjajar padahal tempatnya sempit.
Tailwind v4 punya container query bawaan. Tandai pembungkusnya dengan @container, lalu pakai prefix @md: di dalamnya:
<aside class="w-64 @container">
<div class="flex flex-col gap-3 @md:flex-row">
<img class="size-20" src="sepatu.jpg" alt="Sepatu lari">
<p>Sepatu Lari, Rp450.000</p>
</div>
</aside>
@containerjadicontainer-type: inline-size: lebar<aside>boleh ditanya.@md:flex-rowjadi@container (width >= 28rem): berjajar kalau wadahnya minimal 448px.- Di sidebar 256px kartunya numpuk, di konten 496px kartunya berjajar, di layar yang sama.
- Ukurannya beda dari prefix layar:
md:itu layar 768px,@md:itu wadah 448px.
⚠️ Jebakan yang sering ketemu
- Lupa
flexdi navbar. Tanpaflex,items-centerdanjustify-betweendiabaikan. Latihannya mengecekdisplay: flexdi#navbar. - Mengira
sm:itu untuk HP.sm:berlaku mulai 640px. Gaya untuk HP ditulis tanpa prefix. md:flextanpahidden. Link-nya tampil di semua layar, karena gak ada yang menyembunyikannya di HP. Pasangannya selaluhidden md:flex.@md:tanpa@container. Gak ada wadah yang diukur, jadi@md:flex-rowgak pernah berlaku.
TL;DR: Navbar dasar: flex items-center justify-between p-4 di <nav>, dengan grup link flex gap-4. Tailwind itu mobile-first: class tanpa prefix untuk semua layar, sm: mulai 640px, md: mulai 768px, lg: mulai 1024px. hidden md:flex tersembunyi di HP dan muncul mulai 768px, md:hidden kebalikannya: hilang mulai 768px ke atas. text-lg md:text-xl lg:text-2xl membesar per breakpoint. Untuk komponen yang dipasang di banyak tempat, pakai @container di pembungkus dan @md: di dalamnya, supaya yang diukur lebar wadahnya, bukan layarnya.
