Media and Feature Queries pada Hover, Focus, dan Other States dalam Tailwind CSS (Responsive Breakpoints)

Hello guys! Tailwind CSS merupakan Framework CSS yang banyak digunakan di Aplikasi Web Modern saat ini. Masih di Topik yang sama pada Hover, Focus, dan Other States, jika sebelumnya Subtopik tentang Pseudo-Elements, kali ini kita akan membahas mengenai Media and Feature Queries pada Tailwind CSS, khususnya tentang Titik Henti Responsif (Responsive Breakpoints).

Sumber : Tailwindcss.com

Untuk memberi gaya pada elemen pada breakpoint tertentu, gunakan varian responsif seperti md dan lg.

Sebagai contoh, konfigurasi ini akan menampilkan grid dengan 3 kolom di perangkat mobile, 4 kolom pada layar berukuran sedang, dan 6 kolom pada layar berukuran besar.

<div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
  <!-- ... -->
</div>

Untuk mengatur gaya elemen berdasarkan lebar elemen induk (parent), bukan berdasarkan viewport, gunakan varian seperti @md dan @lg.

<div class="@container">
  <div class="flex flex-col @md:flex-row">
    <!-- ... -->
  </div>
</div>

Mari kita pahami dengan contoh tata letak kisi produk responsif yang menyesuaikan diri berdasarkan ukuran layar.

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script> 
</head> 
 
<body class="p-4 bg-gray-300"> 
  <div class="grid grid-cols-1 sm:grid-cols-2 
              md:grid-cols-3 gap-4 p-2">
    <div class="bg-white shadow-lg p-4 rounded-lg">
      <h3 class="text-lg font-semibold">
          Classic Watch
      </h3>
      <p class="text-gray-600">
          Timeless design
      </p>
    </div>
    <div class="bg-white shadow-lg p-4 rounded-lg">
      <h3 class="text-lg font-semibold">
          Bluetooth Speaker
      </h3>
      <p class="text-gray-600">
          Powerful sound
      </p>
    </div>
    <div class="bg-white shadow-lg p-4 rounded-lg">
      <h3 class="text-lg font-semibold">
          Wireless Earbuds
      </h3>
      <p class="text-gray-600">
          Noise-cancelling
      </p>
    </div>
    <div class="bg-white shadow-lg p-4 rounded-lg">
      <h3 class="text-lg font-semibold">
          Smartphone Stand
      </h3>
      <p class="text-gray-600">
          Adjustable angle
      </p>
    </div>
    <div class="bg-white shadow-lg p-4 rounded-lg">
      <h3 class="text-lg font-semibold">
          Portable Charger
      </h3>
      <p class="text-gray-600">
          High capacity
      </p>
    </div>
    <div class="bg-white shadow-lg p-4 rounded-lg">
      <h3 class="text-lg font-semibold">
          Ergonomic Mouse
      </h3>
      <p class="text-gray-600">
          Comfortable grip
      </p>
    </div>
  </div> 
</body>
</html>

Ukuran Kecil :

Ukuran Sedang :

Ukuran Besar :

Hasil Output :

Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)