Responsive variant: mobile-first
Prefix seperti md: berarti 'berlaku mulai breakpoint md ke atas' — persis @media (min-width: 768px). Karena itu Tailwind mobile-first: kelas tanpa prefix adalah dasar untuk layar kecil, kelas berprefix menimpanya di layar lebih besar. Contoh: grid-cols-1 md:grid-cols-3. Hindari menulis sm: untuk sesuatu yang seharusnya menjadi dasar; kalau tampilan HP sudah membutuhkannya, tulis kelas itu tanpa prefix.
👀 Contoh dulu
<!-- teks kecil di HP, besar di layar lebar --> <h1 class="text-xl md:text-3xl lg:text-5xl">Judul</h1> <!-- sembunyi di HP, tampil dari md ke atas --> <nav class="hidden md:block">Menu desktop</nav>
Hasilnya: Judul membesar bertahap seiring lebar layar; menu desktop hanya muncul di layar md ke atas.
💡 Breakpoint Tailwind: sm=640px, md=768px, lg=1024px, xl=1280px. Semuanya berarti 'dari sini ke atas'.
📝 Sekarang giliranmu
Buat grid satu kolom di mobile dan tiga kolom mulai breakpoint md: tambahkan grid, grid-cols-1, md:grid-cols-3, dan gap-4.