Responsive Design

Responsive Design dengan Tailwind

Tailwind menggunakan pendekatan mobile-first untuk responsive design. Class tanpa prefix berlaku untuk semua ukuran layar, sedangkan prefix seperti sm:, md:, lg: berlaku untuk layar yang lebih besar.

Breakpoints Default

• sm: — 640px ke atas
• md: — 768px ke atas
• lg: — 1024px ke atas
• xl: — 1280px ke atas
• 2xl: — 1536px ke atas

Contoh Grid Responsive

<!-- 1 kolom di mobile, 2 di tablet, 3 di desktop -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

Typography Responsif

<h1 class="text-2xl sm:text-3xl lg:text-5xl font-bold">
  Judul Halaman
</h1>

<p class="text-sm sm:text-base text-gray-600">
  Paragraf yang ukurannya menyesuaikan layar.
</p>

Show/Hide di Breakpoint Tertentu

<!-- Hanya tampil di mobile -->
<button class="block sm:hidden">Menu</button>

<!-- Hanya tampil di desktop -->
<nav class="hidden sm:flex items-center gap-6">...</nav>

Selalu mulai dari desain mobile terlebih dahulu, baru tambahkan penyesuaian untuk layar yang lebih besar menggunakan prefix breakpoint.