Responsive design artinya satu halaman yang menyesuaikan diri dengan lebar layar: satu kolom di HP, dua kolom di tablet dan laptop. Di Tailwind caranya pakai awalan breakpoint di depan class, misalnya md:grid-cols-2, yang artinya "mulai lebar 768px ke atas, pakai grid-cols-2". Bayangin wahana di taman bermain dengan papan "boleh naik mulai tinggi 120 cm". Anak setinggi 120 cm boleh naik, dan anak yang lebih tinggi juga tetap boleh. Awalan md: itu papan batas yang sama, cuma ukurannya lebar layar.
🧪 Tebakan cepat:
md:grid-cols-2dibuka di laptop selebar 1280px. Masih dua kolom, ataumd:cuma berlaku di tablet? Tebak dulu, jawabannya ada di bagian "Lima breakpoint, semuanya mulai dari".
Satu kolom di HP, dua kolom mulai tablet
Ini layout yang sama dengan yang ada di Lab dan di latihan:
<div id="layout" class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-blue-100 p-4">Kolom 1</div>
<div class="bg-green-100 p-4">Kolom 2</div>
</div>
Tailwind mengubah class-class itu jadi CSS seperti ini:
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gap-4 { gap: 1rem; }
@media (width >= 48rem) {
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
grid,grid-cols-1, dangap-4gak punya awalan, jadi berlaku di semua lebar layar.md:grid-cols-2dibungkus@media (width >= 48rem). 48rem = 768px, jadi aturan ini baru nyala kalau layarnya 768px atau lebih.- Begitu nyala,
md:grid-cols-2menimpagrid-cols-1, karena Tailwind menaruh aturan berawalan sesudah aturan biasa.
Geser lebar layarnya di Lab, hasilnya begini:
| Lebar layar | grid-cols-1 |
md:grid-cols-2 |
Hasil |
|---|---|---|---|
| 360px (HP) | berlaku | mati, di bawah 768px | 1 kolom, Kolom 2 di bawah Kolom 1 |
| 764px | berlaku | mati | 1 kolom |
| 768px (tablet) | ditimpa | nyala | 2 kolom |
| 1280px (laptop) | ditimpa | nyala | 2 kolom |
Lima breakpoint, semuanya mulai dari
| Awalan | Mulai dari | Kira-kira |
|---|---|---|
| (tanpa awalan) | 0px | semua layar, termasuk HP |
sm: |
40rem = 640px | HP mendatar |
md: |
48rem = 768px | tablet |
lg: |
64rem = 1024px | laptop |
xl: |
80rem = 1280px | desktop |
2xl: |
96rem = 1536px | layar lebar |
Semua awalan artinya "mulai dari lebar ini ke atas", gak ada batas atasnya. Jadi di laptop 1280px, md:grid-cols-2 tetap nyala, dan layout-nya tetap dua kolom. Itu jawaban tebakannya.
Mau tiga kolom di laptop? Tambah satu awalan lagi: grid-cols-1 md:grid-cols-2 lg:grid-cols-3. Di 1280px, md: dan lg: sama-sama nyala, dan lg: yang menang, karena Tailwind menaruh breakpoint dari kecil ke besar.
Mobile-first: tulis gaya HP tanpa awalan
Class tanpa awalan berlaku di semua layar, jadi dia gaya untuk layar paling kecil. Polanya: tulis dulu tampilan HP tanpa awalan, lalu tambahkan awalan untuk layar yang lebih lebar. Ini namanya mobile-first.
Kebalikannya sering bikin bingung: grid grid-cols-2 md:grid-cols-1. Di HP malah dua kolom sempit, dan di laptop jadi satu kolom panjang. Urutan class di atribut juga gak ngaruh: md:grid-cols-2 grid-cols-1 hasilnya sama persis dengan grid-cols-1 md:grid-cols-2, karena yang menentukan urutan CSS buatan Tailwind.
📌 Awalan max-* dan breakpoint sendiri
max-md:hiddendibungkus@media (width < 48rem), jadi cuma berlaku di bawah 768px. Kebalikan darimd:.hidden md:block: tersembunyi di HP, muncul mulai 768px. Cocok buat menu lengkap yang cuma ada di layar lebar.- Di Tailwind v4, breakpoint baru ditambahkan di CSS, bukan di file JavaScript:
@import "tailwindcss";
@theme {
--breakpoint-3xl: 120rem;
}
Sekarang awalan 3xl: ikut tersedia, mulai 120rem = 1920px.
⚠️ Jebakan yang sering ketemu
- Mengira
md:cuma untuk tablet.md:berlaku mulai 768px ke atas, termasuk laptop dan desktop. - Desktop-first.
grid-cols-2 md:grid-cols-1bikin HP dapat dua kolom sempit. Gaya HP ditulis tanpa awalan. - Lupa
grid.md:grid-cols-2tanpagridgak ngapa-ngapain. Latihannya mengecekdisplay: griddi#layout. - Salah tulis awalan.
md: grid-cols-2(pakai spasi) ataumd-grid-cols-2gak dikenali Tailwind. Latihannya mencari teksgrid-cols-1,md:grid-cols-2, dangap-4persis seperti itu.
TL;DR: Awalan breakpoint artinya "mulai lebar ini ke atas": sm: 640px, md: 768px (48rem), lg: 1024px, xl: 1280px, 2xl: 1536px. Tailwind mengubahnya jadi @media (width >= ...). Class tanpa awalan berlaku di semua layar, jadi tulis gaya HP dulu tanpa awalan, lalu timpa untuk layar lebar: itu mobile-first. grid grid-cols-1 md:grid-cols-2 gap-4 = satu kolom di HP, dua kolom mulai 768px, dan tetap dua kolom di laptop.
