Halo teman-teman semuanya! Setelah sebelumnya kita belajar tentang bagaimana membuat tampilan yang responsif dengan Tailwind CSS, kini saatnya kita membuat tampilan tersebut menjadi lebih interaktif.
Tailwind menyediakan berbagai macam state variants seperti hover:, focus:, dan active: untuk mengatur gaya elemen saat terjadi aksi tertentu — seperti ketika elemen disentuh, diklik, atau difokuskan. Fitur ini sangat berguna untuk tombol, input, tautan, dan komponen interaktif lainnya.
1. Pseudo-Class: hover
Class hover: digunakan untuk mengatur gaya saat elemen disentuh oleh kursor (mouse pointer).
| Class |
Fungsi Saat Hover |
hover:bg-blue-500 |
Mengubah latar menjadi biru |
hover:text-white |
Mengubah warna teks menjadi putih |
hover:shadow-lg |
Memberi bayangan lebih besar |
hover:underline |
Menambahkan garis bawah pada teks |
Contoh:
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-800">
Hover Saya
</button>
2. Pseudo-Class: focus
Digunakan untuk mengatur tampilan saat elemen mendapat focus (misalnya input yang diklik atau dipilih).
| Class |
Fungsi Saat Focus |
focus:outline-none |
Menghilangkan garis default |
focus:ring-2 |
Menambahkan ring saat focus |
focus:ring-blue-400 |
Warna ring biru saat focus |
focus:border-blue-500 |
Mengubah warna border saat fokus |
Contoh:
<input class="border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-blue-400" placeholder="Ketik di sini" />
3. Pseudo-Class: active
active: digunakan untuk menandai elemen yang sedang ditekan (klik sedang berlangsung).
| Class |
Fungsi Saat Aktif (Klik) |
active:bg-blue-900 |
Latar berubah saat ditekan |
active:scale-95 |
Sedikit mengecil saat ditekan |
active:ring |
Menambahkan ring |
Contoh:
<button class="bg-green-600 text-white px-4 py-2 rounded active:bg-green-800 active:scale-95 transition">
Klik Saya
</button>
4. Menggabungkan Beberapa State
Kita bisa menggabungkan beberapa state sekaligus untuk menciptakan interaksi yang kaya dan nyaman.
Contoh:
<input class="border border-gray-300 p-2 rounded
focus:outline-none focus:ring-2 focus:ring-blue-500
hover:border-blue-400 transition" placeholder="Masukkan email" />
5. Transisi untuk Efek Lebih Halus
Untuk membuat perpindahan efek lebih halus, gunakan class seperti transition, duration-200, atau ease-in-out.
| Class |
Fungsi |
transition |
Mengaktifkan transisi otomatis |
duration-200 |
Durasi 200ms |
ease-in-out |
Pola transisi halus masuk-keluar |
Contoh:
<button class="bg-purple-600 text-white px-4 py-2 rounded
hover:bg-purple-700 transition duration-200 ease-in-out">
Tombol Halus
</button>
Contoh Lengkap: Form Interaktif
Contoh lengkap di bawah ini menunjukkan penggunaan hover, focus, dan active untuk membuat form dan tombol yang terasa interaktif.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<title>Form Interaktif</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-6">
<div class="max-w-md mx-auto bg-white p-6 rounded shadow">
<h2 class="text-2xl font-bold mb-4 text-gray-800">Form Kontak</h2>
<input class="w-full mb-4 p-3 border border-gray-300 rounded
focus:outline-none focus:ring-2 focus:ring-blue-500
hover:border-blue-400 transition"
type="text" placeholder="Nama Lengkap" />
<input class="w-full mb-4 p-3 border border-gray-300 rounded
focus:outline-none focus:ring-2 focus:ring-green-500
hover:border-green-400 transition"
type="email" placeholder="Email" />
<button class="w-full bg-blue-600 text-white py-3 rounded
hover:bg-blue-700 active:bg-blue-800 active:scale-95
transition duration-200 ease-in-out">
Kirim Pesan
</button>
</div>
</body>
</html>
Kesimpulan
Dengan memanfaatkan class seperti hover:, focus:, dan active:, kita bisa membuat antarmuka yang tidak hanya menarik secara visual, tapi juga interaktif dan nyaman digunakan. Ditambah dengan utility class untuk transisi, kita dapat menghasilkan efek yang halus dan profesional.
Pada artikel selanjutnya, kita akan membahas tentang customizing Tailwind CSS — bagaimana cara menyesuaikan tema warna, font, dan komponen dengan kebutuhan proyek kita.
Terima Kasih