Desain Responsif (Breakpoints)
Di era modern, lebih dari 60% pengguna internet membuka website dari HP. Jika website kamu hanya bagus di
layar laptop, kamu akan kehilangan banyak pengunjung.
Dalam CSS murni, kita harus menulis blok @media (min-width: 768px) yang panjang. Di Tailwind?
Kamu cukup menambahkan Awalan Layar (Prefix) seperti md: di depan nam class yang sudah ada!
Sekali kedip, websitemu responsif.
đą 1. Filosofi "Mobile-First" (HP Dulu, Laptop Belakangan)
Tailwind menganut prinsip utama Mobile-First. Artinya, sebuah class yang tidak diberi awalan layar
APAPUN (misal: bg-red-500) akan dianggap sebagai tampilan untuk Layar Paling Kecil
(Handphone) ke atas.
| Awalan (Prefix) | Titik Pecah (Width) | Target Perangkat |
|---|---|---|
| *(Tanpa awalan)* | Mulai dari 0px | đą Handphone (Smartphones) |
| sm: | âĨ 640px | đą Tablet (Portrait / Putar Tegak) |
| md: | âĨ 768px | đšī¸ Tablet Landscape / Laptop Kecil |
| lg: | âĨ 1024px | đģ Laptop Standar / Desktop |
| xl: | âĨ 1280px | đĨī¸ Monitor Desktop Besar |
| 2xl: | âĨ 1536px | đē Layar Super Lebar (Ultrawide) |
đ ī¸ 2. Cara Kerja Resizing (Simulator)
Mari pelajari kode sakti ini: w-full md:w-1/2 lg:w-1/3.
Artinya: Secara asal (Di layar HP) elemen ini berukuran 100%. Namun jika layar ditarik melebar sampai mencapai
titik md (ukuran iPad), ia akan menyusut jadi setengahnya (50%). Dan saat monitornya membesar lagi
ukuran laptop (lg), ia akan menyusut jadi sepertiga (33%).
Tarik Layar Browser Virtual
đŧī¸ 3. Contoh Kasus: Galeri Produk E-Commerce
Salah satu kegunaan terbaik Breakpoints adalah saat membuat galeri foto atau daftar produk. Di HP, kita ingin gambar memenuhi layar secara menyamping vertikal (1 kolom). Namun di iPad/Laptop, akan sangat konyol jika gambarnya raksasa sendirian. Kita ubah menjadi 3 kolom.
Kode Ajaib Tailwind:
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Item 1 -->
<!-- Item 2 -->
<!-- Item 3 -->
</div>
Hasil Asli di Browsermu (Coba ubah ukuran jendelamu!):
Kamera Vintage
Rp 1.500.000
Headphone Bass
Rp 800.000
đ Titik Ingat Breakpoint
Kamu tidak perlu menghafal semua Breakpoint. Jika kamu hanya ingat satu breakpoint saja,
ingatlah md:.
- Tulis desainmu seolah-olah kamu membuatnya HANYA untuk layar HP (Tumpuk dari atas ke bawah). Jangan berikan awalan layar apa-apa.
- Begitu desain HP mu rapi, tambahkan
md:pada elemen (misal Flex atau Grid) yang kamu ingin buat bersebelahan saat layarnya lebar (Laptop).