Tailwind adalah sebuah framework CSS yang dirancang untuk memudahkan pengembangan antarmuka pengguna dalam pengembangan web. Framework ini menyediakan sejumlah besar kelas CSS yang dapat digunakan untuk membangun dan mengatur tampilan halaman web dengan cepat dan efisien.
Membuat Responsive Design Menggunakan Tailwind
Responsive design, atau desain responsif, adalah pendekatan dalam pengembangan web yang memastikan tampilan halaman web dapat menyesuaikan diri dengan berbagai ukuran layar perangkat yang berbeda, seperti komputer desktop, tablet, atau smartphone. Dengan desain responsif, halaman web akan diatur ulang secara otomatis untuk memastikan konten tetap terlihat dengan baik dan dapat diakses oleh pengguna pada berbagai perangkat.
Mengenal Breakpoints pada Tailwind
Dalam Tailwind, breakpoint adalah titik tertentu pada rentang lebar layar yang digunakan untuk menentukan perubahan tata letak atau gaya pada elemen-elemen dalam desain responsif. Breakpoint memungkinkan untuk mengatur perilaku elemen UI ketika layar berubah ukurannya, sehingga dapat mengoptimalkan tampilan halaman web untuk berbagai perangkat.
Tailwind menyediakan sejumlah breakpoint bawaan yang sudah ditentukan. Berikut adalah beberapa contoh breakpoint yang umum digunakan:
- Small (sm): Biasanya digunakan untuk layar smartphone dengan lebar hingga sekitar 640px.
- Medium (md): Digunakan untuk layar tablet dengan lebar sekitar 640px hingga 768px.
- Large (lg): Digunakan untuk layar laptop atau desktop dengan lebar sekitar 768px hingga 1024px.
- Extra Large (xl): Digunakan untuk layar desktop besar dengan lebar di atas 1024px.
Membuat Komponen Card
Pada kesempatan kali ini kita akan membuat sebuah komponen card menggunakan Tailwind. Pada komponen tersebut akan memiliki sebuah gambar, judul produk, dan bagian deskripsi produk. Untuk container pada komponen card tersebut kita akan menggunakan grid dari Tailwind yang berfungsi untuk membuat tata letak grid yang responsif dengan mudah. Grid memungkinkan kamu untuk mengatur elemen-elemen ke dalam baris dan kolom, grid-cols berfungsi untuk mengatur jumlah komponen yang ada di dalam kolom grid.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="output.css">
<title>Document</title>
</head>
<body>
<div class="border border-red h-screen flex justify-center items-center">
<div class="container mx-auto px-4 py-8">
<div class="grid grid-cols-4">
<div class="bg-gray-200 p-4">
<img src="../image-1.jpeg" alt="">
<div class="p-3">
<h2 class="text-xl">Produk 1</h2>
<p class="text-gray-600">Deskripsi Produk 1</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Menambah Komponen Card
Setelah membuat komponen card kita perlu membuat beberapa komponen card lagi agar dapat menerapkan responsive pada tampilan yang kita buat. Pada container grid kita perlu memberikan kelas “gap-4” agar memberi jarak pada setiap komponen card yang ada. Pada setiap komponen card juga kita perlu memberikan background, padding, dan ukuran font yang sesuai dengan komponen card pertama.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="output.css">
<title>Document</title>
</head>
<body>
<div class="border border-red h-screen flex justify-center items-center">
<div class="container mx-auto px-4 py-8">
<div class="grid grid-cols-4 gap-4">
<div class="bg-gray-200 p-4">
<img src="../image-1.jpeg" alt="">
<div class="p-3">
<h2 class="text-xl">Produk 1</h2>
<p class="text-gray-600">Deskripsi Produk 1</p>
</div>
</div>
<div class="bg-gray-200 p-4">
<img src="../image-2.jpeg" alt="">
<div class="p-3">
<h2 class="text-xl">Produk 2</h2>
<p class="text-gray-600">Deskripsi Produk 2</p>
</div>
</div>
<div class="bg-gray-200 p-4">
<img src="../image-3.jpeg" alt="">
<div class="p-3">
<h2 class="text-xl">Produk 3</h2>
<p class="text-gray-600">Deskripsi Produk 3</p>
</div>
</div>
<div class="bg-gray-200 p-4">
<img src="../image-4.jpeg" alt="">
<div class="p-3">
<h2 class="text-xl">Produk 4</h2>
<p class="text-gray-600">Deskripsi Produk 4</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Memberikan Responsive pada Komponen Card
Untuk memberikan efek responsive kita perlu menggunakan breakpoint yang telah tersedia pada Tailwind “sm” kita gunakan jika layar memiliki ukuran sebesar minimal 640px. Pada ukuran tersebut kita akan memberikan ukuran kolom pada grid sebesar dua kolom, sedangkan untuk ukuran “md” yang akan berubah jika ukuran layar memiliki ukuran minimal 768px dan kita akan memberikan ukuran kolom grid sebesar 3 kolom, dan untuk ukuran “lg” yang akan berubah jika ukuran layar memiliki ukuran minimal 1024px yang akan memberikan ukuran kolom grid sebesar 4 kolom.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="output.css">
<title>Document</title>
</head>
<body>
<div class="border border-red h-screen flex justify-center items-center">
<div class="container mx-auto px-4 py-8">
<div class="grid grid-cols-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 ">
<div class="bg-gray-200 p-4">
<img src="../image-1.jpeg" alt="">
<div class="p-3">
<h2 class="text-xl">Produk 1</h2>
<p class="text-gray-600">Deskripsi Produk 1</p>
</div>
</div>
<div class="bg-gray-200 p-4">
<img src="../image-2.jpeg" alt="">
<div class="p-3">
<h2 class="text-xl">Produk 2</h2>
<p class="text-gray-600">Deskripsi Produk 2</p>
</div>
</div>
<div class="bg-gray-200 p-4">
<img src="../image-3.jpeg" alt="">
<div class="p-3">
<h2 class="text-xl">Produk 3</h2>
<p class="text-gray-600">Deskripsi Produk 3</p>
</div>
</div>
<div class="bg-gray-200 p-4">
<img src="../image-4.jpeg" alt="">
<div class="p-3">
<h2 class="text-xl">Produk 4</h2>
<p class="text-gray-600">Deskripsi Produk 4</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Contoh tampilan di berbagai ukuran:
Tampilan pada ukuran website
Tampilan pada ukuran tablet
Tampilan pada ukuran mobile
Kesimpulan
Dalam implementasi desain responsif dengan Tailwind, kita dapat menggunakan kelas “grid” untuk tata letak yang responsif dan menarik. Dengan memanfaatkan properti “min-width” dan kelas-kelas utilitas yang sesuai, kita dapat memastikan bahwa elemen-elemen penting dalam tampilan web tetap terlihat dengan baik, bahkan pada layar yang lebih kecil. Agar dapat lebih memahami penggunaan Tailwind kamu dapat mengikuti kelas CSS Tailwind Web Design dan Master Class: React JS dan Tailwind CSS Website Development pada website buildwithangga.com
