Teknik Antarmuka Responsif

Kenapa ini penting

Lebih dari separuh pengunjung website di Indonesia membuka dari HP. Situs yang hanya bagus di laptop berarti kehilangan sebagian besar pengguna. Desain responsif adalah keharusan, bukan bonus.

Tailwind membuat responsif sangat mudah dengan prefix breakpoint seperti md: dan lg:. Di v4 juga ada container queries bawaan, sehingga komponen bisa menyesuaikan diri dengan lebar wadahnya, bukan lebar layar. Ini sangat berguna untuk komponen yang dipakai di tempat berbeda (sidebar sempit vs area konten lebar).

Konsep inti

Mobile-first

Class tanpa prefix berlaku di semua ukuran. Class dengan prefix berlaku di ukuran itu ke atas. Jadi kamu menulis gaya HP dulu, lalu "menambah" untuk layar lebih besar.

Analogi: mobile-first itu seperti berpakaian berlapis. Kaos (gaya dasar) dipakai di semua cuaca. Kalau lebih dingin (layar lebih lebar), kamu menambah jaket (md:), lalu mantel (lg:). Kamu tidak mulai dari mantel lalu melepasnya.

Kesalahan klasik: menulis sm:text-center dengan niat "rata tengah di HP". Itu justru berarti rata tengah mulai 640px ke atas. Untuk HP, tulis text-center tanpa prefix, lalu md:text-left.

Rentang dan max-*

v4 menyediakan variant max-*: max-md:hidden artinya "sembunyikan di bawah 768px". Kombinasikan untuk rentang: md:max-xl:flex berlaku hanya antara md dan xl. Ini berguna untuk kasus khusus, tapi utamakan pola mobile-first.

Breakpoint kustom

Tambah atau ubah breakpoint di @theme dengan namespace --breakpoint-*: --breakpoint-xs: 30rem; menghasilkan prefix xs:. Untuk nilai sekali pakai ada arbitrary: min-[900px]:grid-cols-3, max-[420px]:text-sm.

Container queries

Media query bertanya "seberapa lebar layar?". Container query bertanya "seberapa lebar wadah saya?". Caranya:

1. Tandai induk dengan class @container.
2. Anak memakai variant @sm:, @md:, @lg:, dan seterusnya (ada tanda @ di depan).

Skala container memakai --container-*: @xs (20rem), @sm (24rem), @md (28rem), @lg (32rem), @xl (36rem), @2xl (42rem), sampai @7xl. Ada juga @max-md: untuk "di bawah", nilai bebas @min-[400px]:, dan container bernama: @container/kartu lalu @md/kartu:flex-row untuk menunjuk wadah tertentu saat bersarang.

Kapan pakai yang mana? Layout halaman (navbar, kolom utama) cocok dengan breakpoint layar. Komponen yang bisa ditaruh di mana saja (kartu, widget) cocok dengan container query.

Contoh kode

<!-- Mobile-first: 1 kolom → 2 kolom → 4 kolom -->
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
  <div class="rounded-lg bg-gray-100 p-4">1</div>
  <div class="rounded-lg bg-gray-100 p-4">2</div>
  <div class="rounded-lg bg-gray-100 p-4">3</div>
  <div class="rounded-lg bg-gray-100 p-4">4</div>
</div>

<!-- Hero yang tipografinya membesar bertahap -->
<section class="px-4 py-12 text-center md:py-20 md:text-left lg:py-28">
  <h1 class="text-3xl font-bold sm:text-4xl lg:text-6xl">Belajar Ngoding dari Nol</h1>
  <p class="mt-4 text-base text-gray-600 md:max-w-xl md:text-lg">Kurikulum terstruktur dan mentor aktif.</p>
  <div class="mt-8 flex flex-col gap-3 sm:flex-row sm:justify-center md:justify-start">
    <a href="#" class="rounded-lg bg-indigo-600 px-6 py-3 text-center text-white">Mulai</a>
    <a href="#" class="rounded-lg border border-gray-300 px-6 py-3 text-center">Lihat Silabus</a>
  </div>
</section>
<!-- → HP: teks tengah, tombol bertumpuk penuh lebar; md+: rata kiri, tombol sebaris -->

<!-- max-* variant: banner hanya muncul di layar kecil -->
<div class="bg-amber-100 p-3 text-center text-sm md:hidden">Unduh aplikasi kami untuk pengalaman lebih baik</div>
<div class="max-md:hidden">Panel tambahan khusus layar md ke atas</div>

/* Breakpoint kustom */
@import "tailwindcss";

@theme {
  --breakpoint-xs: 30rem;   /* prefix baru xs: (480px) */
  --breakpoint-3xl: 120rem; /* prefix baru 3xl: (1920px) */
}

<!-- Container query: kartu menyesuaikan lebar wadahnya -->
<div class="grid gap-6 lg:grid-cols-[18rem_1fr]">
  <!-- Wadah sempit (sidebar) -->
  <aside class="@container rounded-xl bg-gray-50 p-3">
    <article class="flex flex-col gap-3 rounded-lg bg-white p-3 @md:flex-row">
      <img src="https://picsum.photos/seed/c1/300/200" alt="" class="aspect-3/2 rounded @md:w-40" />
      <div>
        <h3 class="font-semibold @md:text-lg">Kartu di sidebar</h3>
        <p class="text-sm text-gray-500">Tetap vertikal karena wadahnya sempit.</p>
      </div>
    </article>
  </aside>

  <!-- Wadah lebar (konten utama): kartu yang SAMA jadi horizontal -->
  <main class="@container rounded-xl bg-gray-50 p-3">
    <article class="flex flex-col gap-3 rounded-lg bg-white p-3 @md:flex-row">
      <img src="https://picsum.photos/seed/c1/300/200" alt="" class="aspect-3/2 rounded @md:w-40" />
      <div>
        <h3 class="font-semibold @md:text-lg">Kartu di konten utama</h3>
        <p class="text-sm text-gray-500">Berubah horizontal karena wadahnya ≥ 28rem.</p>
      </div>
    </article>
  </main>
</div>

<!-- Container bernama saat bersarang -->
<div class="@container/halaman">
  <div class="@container/kartu w-1/2">
    <p class="@lg/halaman:font-bold @sm/kartu:text-lg">Mengacu ke dua wadah berbeda</p>
  </div>
</div>

Kesalahan umum

1. Memakai sm: untuk HP. Ingat mobile-first: tanpa prefix = semua ukuran termasuk HP.
2. Menulis responsif dari desktop ke bawah dengan banyak max-*:. Kode jadi sulit dibaca. Mulai dari HP, tambah ke atas.
3. Lupa class @container di induk, sehingga @md: tidak pernah aktif.
4. Lupa tag viewport <meta name="viewport" content="width=device-width, initial-scale=1">. Tanpa ini, HP menampilkan versi desktop yang diperkecil dan breakpoint tidak bekerja.
5. Menguji hanya di satu ukuran. Gunakan mode responsif di DevTools browser dan geser lebarnya perlahan.

Latihan

1. Mudah, Buat teks yang berukuran text-xl di HP, text-3xl di md, text-5xl di xl.
2. Sedang, Buat footer dengan 4 kolom tautan: 2 kolom di HP, 4 kolom di lg, dan baris hak cipta yang rata tengah di HP tapi rata kiri di md.
3. Menantang, Buat komponen kartu profil memakai container query: di wadah < 24rem avatar di atas nama (kolom), di wadah ≥ 24rem avatar di kiri nama (baris), dan di wadah ≥ 32rem tampil tombol "Ikuti" di kanan.

<h2 class="text-xl md:text-3xl xl:text-5xl">Teks yang tumbuh</h2>

<footer class="border-t border-gray-200 px-4 py-10">
  <div class="grid grid-cols-2 gap-8 lg:grid-cols-4">
    <div><h4 class="font-semibold">Produk</h4></div>
    <div><h4 class="font-semibold">Perusahaan</h4></div>
    <div><h4 class="font-semibold">Bantuan</h4></div>
    <div><h4 class="font-semibold">Sosial</h4></div>
  </div>
  <p class="mt-10 text-center text-sm text-gray-500 md:text-left">© 2026 KodingUp</p>
</footer>

<div class="@container">
  <div class="flex flex-col items-center gap-3 rounded-xl border border-gray-200 p-4 @sm:flex-row">
    <img src="https://i.pravatar.cc/96?img=20" alt="" class="size-14 rounded-full" />
    <div class="text-center @sm:flex-1 @sm:text-left">
      <p class="font-semibold">Sari Wulandari</p>
      <p class="text-sm text-gray-500">Mentor React</p>
    </div>
    <button class="hidden rounded-lg bg-indigo-600 px-4 py-2 text-sm text-white @lg:block">Ikuti</button>
  </div>
</div>

Ringkasan

• Tailwind mobile-first: tanpa prefix = semua ukuran, md: = 768px ke atas.
• Breakpoint default: sm 40rem, md 48rem, lg 64rem, xl 80rem, 2xl 96rem; tambah via --breakpoint-*.
• max-*: untuk "di bawah ukuran", kombinasi md:max-xl: untuk rentang.
• Container query: induk @container, anak @sm:, @md:; bisa diberi nama @container/nama.
• Breakpoint layar untuk layout halaman, container query untuk komponen yang dipakai di banyak tempat.