Belajar Tailwind CSS - Advanced Responsive Techniques & Container Queries

#Pendahuluan

Media query berbasis viewport punya keterbatasan: sebuah kartu di sidebar dan kartu yang sama di konten utama tidak bisa merespons ukurannya sendiri. Container queries menjawab masalah ini — styling bereaksi terhadap ukuran parent, bukan ukuran layar. Episode 16 membahas container queries, fluid typography, dan komposisi layout modern.

Teknik ini menjadi penting ketika komponen dipakai ulang di konteks yang sangat berbeda. Satu komponen ProductCard bisa tampil bagus di grid 3 kolom maupun di sidebar sempit, tanpa menulis komponen kedua.

#Container Queries

#Install dan @container

Pasang plugin resmi:

npm install -D @tailwindcss/container-queries

Daftarkan di config, lalu tandai sebuah elemen sebagai container:

Mendaftarkan plugin

module.exports = {
  plugins: [require("@tailwindcss/container-queries")],
};

Container dan child responsive

<div class="@container">
  <div class="grid grid-cols-1 @md:grid-cols-2">
    <div>Kartu 1</div>
    <div>Kartu 2</div>
  </div>
</div>

@md:grid-cols-2 aktif saat container minimal 28rem — bukan saat viewport tertentu. Artinya kartu yang sama otomatis beradaptasi apakah ia berada di sidebar atau di konten penuh.

#Tingkatan Container

Container mengikuti ukuran terdekat ke atas. Untuk kontrol presisi, beri nama container:

Container bernama

<div class="@container/layout">
  <aside class="@container/sidebar">
    <div class="@sm:flex-col @lg:flex-row">Konten adaptif</div>
  </aside>
</div>

Container bernama memastikan child merespons container yang tepat — pola @container/layout ini penting saat container bertingkat.

#Fluid Typography dengan clamp()

Ukuran teks yang "mengalir" mengikuti viewport dibuat dengan clamp():

Fluid typography

<h1 class="text-[clamp(1.5rem,4vw,3rem)] font-bold">
  Judul yang membesar mengikuti lebar layar
</h1>

clamp(1.5rem, 4vw, 3rem) berarti: minimal 1.5rem, disukai 4vw, maksimal 3rem. Pada layar kecil teks tidak mengecil di bawah batas, pada layar besar tidak membengkak melewati batas — tanpa satu media query pun.

Untuk kombinasi breakpoint, fluid typography sering dipasangkan dengan skala Tailwind:

Fluid dengan fallback

<h1 class="text-3xl text-[clamp(1.875rem,4vw,3rem)]">
  Judul halaman
</h1>

text-3xl menjadi fallback statis, lalu kelas text-[clamp(...)] menyempurnakannya di browser yang mendukung. Fallback menjaga teks tetap terbaca di browser lama.

#Komposisi Layout State-Driven

Layout modern sering menggabungkan beberapa sumber kebenaran: ukuran container, viewport, dan state interaksi. Contoh komponen yang merespons ketiganya:

Komposisi responsif + state

<article
  class="group @container p-4
         @lg:grid @lg:grid-cols-[160px_1fr]
         gap-4"
>
  <img
    class="aspect-square w-full rounded-lg
           group-hover:scale-105 transition"
    src="foto.jpg"
    alt="Contoh"
  />
  <div class="mt-4 @lg:mt-0">
    <h2 class="text-xl font-semibold">Judul</h2>
    <p class="text-sm text-gray-600">Deskripsi singkat.</p>
  </div>
</article>

Grid dua kolom muncul saat container lebar; gambar membesar sedikit saat kartu di-hover. Kombinasi @container, group-hover, dan transition ini menunjukkan kekuatan komposisi state-driven — masing-masing varian bekerja tanpa JavaScript.

#Penutup

Episode 16 memperluas toolkit responsive: container queries dengan plugin @tailwindcss/container-queries, fluid typography memakai clamp(), dan komposisi layout yang digerakkan oleh kombinasi container, state, dan breakpoint.

Inti yang harus dibawa pulang:

• Container queries membuat komponen merespons ukuran parent-nya.
• Prefix @md: aktif berdasarkan ukuran container, bukan viewport.
• Container bernama memberi kontrol saat container bertingkat.
• clamp(min, preferensi, max) membuat teks mengalir tanpa media query.
• Sediakan fallback statis untuk browser tanpa dukungan.
• Kombinasikan @container, group-hover, dan transition untuk layout state-driven.

Di episode 17 selanjutnya kita akan membahas accessibility & internationalization — focus rings dan kontras, dukungan reduced motion, serta penanganan RTL dan lokalisasi layout dengan Tailwind.