Tailwind menggunakan pendekatan mobile-first dengan breakpoint prefixes:
| Prefix | Min-width | Target |
|---|---|---|
| (none) | 0px | Semua ukuran (mobile) |
sm: |
640px | Tablet kecil |
md: |
768px | Tablet |
lg: |
1024px | Laptop |
xl: |
1280px | Desktop |
2xl: |
1536px | Layar besar |
<!-- 1 kolom di mobile, 2 di tablet, 3 di desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div>Card 1</div>
<div>Card 2</div>
<div>Card 3</div>
</div>
<!-- Teks kecil di mobile, besar di desktop -->
<h1 class="text-xl md:text-3xl lg:text-5xl">Judul Responsif</h1>
Mobile-first: tulis style untuk mobile dulu, lalu override untuk layar lebih besar.
