Memaksimalkan CSS Container Queries untuk Desain Komponen Modular Modern

Mengapa Media Queries Tidak Lagi Cukup?

Selama lebih dari satu dekade, kita terbiasa menggunakan CSS Media Queries (@media (min-width: 768px)) untuk membangun antarmuka web responsif. Namun, Media Queries hanya mendengarkan dimensi layar viewport, bukan ukuran ruang tempat komponen tersebut diletakkan.

Ketika sebuah kartu artikel diletakkan di sidebar yang sempit pada layar desktop 4K, kartu tersebut akan mengira ia berada di desktop dan menampilkan layout horizontal yang rusak!

/* Komponen Card Berbasis Ukuran Wadah */
.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .article-card {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
  }
}

Implementasi Modern dengan Tailwind CSS v4

Dengan Tailwind CSS terbaru, kita dapat mengaplikasikan container query secara deklaratif:

<div class="@container">
  <div class="flex flex-col @md:flex-row gap-4 p-4">
    <img src="/thumb.jpg" class="w-full @md:w-48 aspect-video rounded-xl" />
    <div class="flex-1">
      <h3 class="text-base @md:text-xl font-bold">Judul Artikel</h3>
      <p class="text-sm text-zinc-400">Deskripsi yang menyesuaikan diri secara elegan...</p>
    </div>
  </div>
</div>

Komponen kini dapat digunakan di modal, sidebar, banner, maupun grid utama tanpa perlu modifikasi styling tambahan.