Halo teman-teman semuanya! Di era modern saat ini, hampir semua pengguna mengakses website dari berbagai perangkat — mulai dari smartphone, tablet, hingga layar desktop lebar. Oleh karena itu, membuat tampilan yang responsif adalah bagian penting dalam pengembangan antarmuka web.
Tailwind CSS sudah menyediakan sistem responsive design bawaan melalui utility class yang bisa disesuaikan untuk berbagai ukuran layar, tanpa perlu menulis media query manual.
1. Breakpoint di Tailwind CSS
Tailwind menggunakan prefix untuk menargetkan ukuran layar tertentu. Berikut daftar breakpoint yang tersedia:
| Prefix |
Ukuran Minimum |
Deskripsi |
sm: |
640px |
Layar kecil (HP) |
md: |
768px |
Layar sedang (tablet) |
lg: |
1024px |
Layar besar (laptop) |
xl: |
1280px |
Layar sangat besar |
2xl: |
1536px |
Layar ultra-lebar |
Prefix ini digunakan sebelum utility class untuk mengatur gaya di ukuran tertentu.
Contoh:
<p class="text-sm md:text-base lg:text-lg">
Ukuran teks ini akan berubah sesuai lebar layar.
</p>
2. Menulis Class Responsif
Kita bisa menulis utility class secara bertingkat. Artinya, kita menetapkan gaya default terlebih dahulu, lalu menimpanya dengan versi responsive.
| Contoh Class |
Fungsi |
p-4 md:p-8 |
Padding 1rem lalu 2rem di layar md ke atas |
text-center sm:text-left |
Teks tengah di HP, kiri di layar yang lebih besar |
grid-cols-1 md:grid-cols-3 |
Grid 1 kolom lalu jadi 3 kolom di layar menengah |
Contoh:
<div class="p-4 md:p-8 bg-white text-center sm:text-left">
Ini kotak responsif dengan padding dan alignment yang berubah.
</div>
3. Menyembunyikan Elemen Berdasarkan Ukuran
Kadang kita ingin elemen hanya muncul di layar tertentu. Tailwind menyediakan class hidden dan block yang bisa digunakan bersamaan dengan prefix.
| Class |
Fungsi |
hidden |
Menyembunyikan elemen |
block |
Menampilkan sebagai blok |
sm:hidden |
Sembunyikan saat layar kecil |
md:block |
Munculkan saat layar md atau lebih besar |
Contoh:
<p class="block sm:hidden text-red-600">Hanya terlihat di HP</p>
<p class="hidden sm:block text-green-600">Hanya terlihat di layar besar</p>
Contoh Lengkap: Responsif Card Layout
Berikut adalah contoh halaman yang berubah tampilan berdasarkan lebar layar.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Responsif Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-6">
<div class="max-w-4xl mx-auto">
<h2 class="text-2xl font-bold text-gray-800 mb-4 text-center sm:text-left">
Kartu Responsif
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white p-4 rounded shadow">
<h3 class="text-lg font-semibold mb-2">Item 1</h3>
<p class="text-gray-600">Konten ini akan disusun otomatis sesuai ukuran layar.</p>
</div>
<div class="bg-white p-4 rounded shadow">
<h3 class="text-lg font-semibold mb-2">Item 2</h3>
<p class="text-gray-600">Cobalah buka di layar besar untuk melihat perbedaannya.</p>
</div>
<div class="bg-white p-4 rounded shadow">
<h3 class="text-lg font-semibold mb-2">Item 3</h3>
<p class="text-gray-600">Grid akan menyesuaikan dari 1 ke 3 kolom.</p>
</div>
</div>
</div>
</body>
</html>
Kesimpulan
Dengan pendekatan responsive-first, Tailwind CSS membuat proses membangun tampilan yang menyesuaikan berbagai ukuran layar menjadi sangat mudah dan efisien.
Kita cukup menambahkan prefix seperti sm:, md:, dan seterusnya ke setiap class yang ingin kita ubah di ukuran tertentu. Dengan ini, kita bisa memastikan bahwa website tetap rapi dan mudah digunakan di semua perangkat.
Di artikel selanjutnya, kita akan belajar tentang hover, focus, dan state variants lainnya di Tailwind CSS — bagaimana caranya membuat tampilan interaktif dan responsif terhadap aksi pengguna.
Terima Kasih