Bangun Komponen Modern: Strategi Reusable UI dengan Tailwind CSS (Part 8)

Rifqi An Rifqi An
•
Maret 04, 2026


Bangun Komponen Modern: Strategi Reusable UI dengan Tailwind CSS (Part 8)

Pernah nggak sih, lagi asyik ngoding, tiba-tiba harus bikin tombol, card, atau bahkan notifikasi yang mirip-mirip tapi beda dikit doang di beberapa halaman? Ulang dari nol? Aduh, buang-buang waktu banget! Udah gitu, kalau ada perubahan, harus ubah di semua tempat. Jangan sampai kita jadi tukang copas kelas kakap tanpa berpikir strategis!

Di dunia ngoding modern yang serba cepat ini, kita itu butuh banget yang namanya komponen yang bisa dipake berkali-kali, alias reusable. Ibarat main Lego, kita punya balok-balok yang bisa dirangkai jadi apa aja. Apalagi kalau lagi ngejar deadline dan stok kopi mulai menipis, efisiensi itu kunci!

Nah, di Part 8 seri tutorial Tailwind CSS kita kali ini, kita bakal bongkar rahasia gimana caranya bikin komponen UI yang super flexi, konsisten, dan siap pakai di mana aja cuma modal Tailwind CSS. Siap-siap level up skill ngoding kalian dan ucapkan selamat tinggal pada repetisi yang bikin pusing!

Daftar Isi

Apa Itu Reusable UI Component dan Kenapa Penting Banget?

Gampangnya, Reusable UI Component itu adalah potongan-potongan UI (misalnya tombol, kartu, form input, modal, navigasi) yang didesain sedemikian rupa agar bisa digunakan kembali di berbagai bagian aplikasi tanpa perlu ditulis ulang dari awal. Bayangin kita punya cetakan kue. Tinggal ganti adonannya atau taburan di atasnya, tapi bentuk kuenya tetap konsisten.

Kenapa penting banget? Banyak alasannya, bro dan sis:

  • Konsistensi Desain: Semua tombol di aplikasi punya gaya yang sama. Pengguna nggak bingung.
  • Kecepatan Development: Nggak perlu ngoding dari nol setiap kali butuh elemen serupa. Tinggal copas dan modifikasi dikit.
  • Mudah Maintenancenya: Kalau ada perubahan desain, cukup ubah di satu tempat, semua komponen yang pakai cetakan itu otomatis berubah. Bye-bye bug di sana-sini gara-gara lupa ubah satu elemen!
  • Kolaborasi Tim Lebih Baik: Anggota tim bisa pakai komponen yang sama, minim miskomunikasi soal gaya UI.

Filosofi Dibalik Komponen Reusable dengan Tailwind CSS

Tailwind CSS itu kan utility-first framework. Artinya, dia ngasih kita ribuan kelas kecil yang punya satu fungsi spesifik (misal: margin-top: 1rem; jadi mt-4). Nah, buat bikin komponen yang reusable, filosofinya adalah mengombinasikan kelas-kelas utilitas ini untuk membentuk sebuah "cetakan".

Beda dengan framework CSS tradisional yang mungkin nyuruh kita bikin class kayak .btn-primary atau .card-default yang isinya langsung semua properti. Dengan Tailwind, kita justru merangkai sendiri. Ini bikin kita lebih fleksibel dan nggak gampang terjebak sama gaya yang kaku. Contoh:


<!-- Button di Bootstrap/Framework Lain -->
<button class="btn btn-primary">Klik Aku</button>

<!-- Button di Tailwind CSS (komponen "dasar" yang kita rangkai) -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
  Klik Aku
</button>

Lihat bedanya? Di Tailwind, kita langsung ngeset properti visualnya lewat kelas utilitas. Ini sejalan dengan prinsip DRY (Don't Repeat Yourself) tapi dengan pendekatan yang berbeda. Kita nggak ngulangin properti CSS yang sama, tapi kita mengulangin kombinasi kelas yang sudah jadi "blueprint" kita.

Mulai Bikin Komponen Kita: Si Card Serbaguna

Aplikasi zaman sekarang pasti punya card, entah itu buat nampilin produk, berita, atau profil pengguna. Yuk, kita bikin "blueprint" dasar card yang bisa dimodifikasi dengan mudah!

Blueprint Card Dasar

Ini adalah struktur card paling sederhana. Kita kasih _styling_ dasar biar cakep dan mudah dibaca.


<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
  <img class="w-full" src="https://via.placeholder.com/400x250/3b82f6/ffffff?text=Gambar+Card" alt="Gambar Card">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Judul Card Keren</div>
    <p class="text-gray-700 text-base">
      Ini adalah deskripsi singkat tentang card kita. Bisa berisi info penting atau CTA menarik.
      Panjangnya bisa disesuaikan, tapi jangan kepanjangan nanti pegel bacanya.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#TailwindCSS</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#Komponen</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#Reusable</span>
  </div>
</div>

Dengan kode di atas, kita punya card yang siap pakai. Gimana kalau kita mau bikin varian lain? Misalnya card tanpa gambar, atau card dengan background beda? Tinggal ubah atau tambahkan kelasnya!

Varian Card Tanpa Gambar

Cukup hapus tag <img> dan sesuaikan padding atau margin jika perlu. Simpel, kan?


<div class="max-w-sm rounded overflow-hidden shadow-lg bg-yellow-100 border border-yellow-400"> <!-- Tambah bg-yellow dan border -->
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2 text-yellow-800">Info Penting Tanpa Gambar!</div>
    <p class="text-yellow-700 text-base">
      Card ini cocok buat notifikasi atau pesan singkat yang nggak butuh visual heboh.
      Hemat bandwidth, hemat kuota user!
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-yellow-200 rounded-full px-3 py-1 text-sm font-semibold text-yellow-700 mr-2 mb-2">#Penting</span>
    <span class="inline-block bg-yellow-200 rounded-full px-3 py-1 text-sm font-semibold text-yellow-700 mr-2 mb-2">#Urgent</span>
  </div>
</div>

Kerennya lagi, kita bisa ganti warna _background_, warna teks, atau _shadow_ cuma dengan mengganti kelas yang ada. Fleksibel abis!

Membuat Tombol Aksi yang Fleksibel

Tombol adalah salah satu komponen UI yang paling sering dipakai dan paling penting. Jangan sampai setiap tombol beda-beda gaya atau ukurannya. Itu bisa bikin _user experience_ jadi kacau!

Blueprint Tombol Dasar (Primary)


<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
  Tombol Utama
</button>

Ini adalah tombol primary kita. Kelas transition dan duration kita tambahkan biar ada efek halus waktu di-hover. Sekarang, gimana kalau kita mau varian lain?

Varian Tombol Lain (Secondary, Outline, Disabled)

Dengan Tailwind, bikin varian itu semudah mengganti beberapa kelas saja. Nggak perlu bikin CSS baru!


<!-- Tombol Secondary (misal: warna hijau) -->
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
  Tombol Sekunder
</button>

<!-- Tombol Outline (misal: border biru, teks biru) -->
<button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
  Tombol Outline
</button>

<!-- Tombol Disabled -->
<button class="bg-gray-400 text-white font-bold py-2 px-4 rounded cursor-not-allowed opacity-50" disabled>
  Tombol Disabled
</button>

Lihat kan? Hanya dengan mengganti beberapa kelas seperti bg-warna, text-warna, atau border-warna, kita bisa dapat varian tombol yang berbeda tanpa perlu pusing mikirin CSS baru. Ini kekuatan utility-first!

Tips Ngoding Komponen Reusable ala Pro

Ngoding komponen itu nggak cuma soal nulis kelas. Ada beberapa tips biar kalian makin jago dan nggak ngalamin drama tengah malam:

  1. Pikirkan Use Case Dulu: Sebelum ngetik kode, bayangin komponen ini mau dipakai buat apa aja. Kira-kira varian apa yang dibutuhkan? Semakin matang perencanaan, semakin fleksibel komponennya.
  2. Mulai dari yang Paling Sederhana (Minimum Viable Component): Jangan langsung bikin komponen super kompleks. Mulai dari yang paling dasar, lalu tambahkan fitur atau varian sedikit demi sedikit. Kalau langsung kompleks, yang ada malah pusing sendiri pas ada bug.
  3. Gunakan Nama Kelas yang Konsisten (kalau perlu): Kalau kalian mau bikin "komponen virtual" dengan nama kelas sendiri (misal: .my-button) dan pakai @apply di CSS, pastikan penamaannya konsisten. Tapi ingat, kekuatan Tailwind ada di utilitas, jadi jangan berlebihan pakai @apply sampai jadi mirip framework CSS tradisional lagi. Gunakan untuk kasus spesifik saja, misalnya untuk varian yang sangat sering dipakai dan kompleks.
  4. Jangan Takut Refactor: Kalau di tengah jalan ngerasa komponennya kurang fleksibel atau ada cara yang lebih baik, jangan ragu buat di-refactor. Itu artinya kalian belajar dan makin matang.
  5. Dokumentasikan (Kalau Perlu): Khususnya kalau kalian kerja dalam tim. Bikin dokumentasi sederhana tentang komponen apa saja yang sudah ada, cara pakainya, dan varian-variannya. Ini bisa berupa file HTML terpisah atau bahkan markdown.
  6. Ngopi yang Cukup: Ini wajib sih. Komponen yang bagus lahir dari pikiran yang jernih dan asupan kafein yang cukup. Jangan sampai lembur berhari-hari cuma gara-gara ngejar estetika komponen!

Latihan: Balada Komponen Notifikasi Hilang

Oke, sekarang giliran kalian unjuk gigi! Tim R&D perusahaan kucing-kucinganmu (PT. Meow Corp) lagi pusing tujuh keliling. Aplikasi detektor bau kaki kucing terbaru mereka sering eror dan notifikasinya acak-acakan, kadang muncul di kanan atas, kadang di tengah, warnanya juga labil. Kamu diminta bikin komponen notifikasi yang super fleksibel, bisa muncul di mana aja (simulasikan dengan kelas positioning), warna beda-beda (success, warning, error), dan bisa di-dismiss (kasih tombol silang sederhana).

Skenario: Kamu harus membuat 3 jenis notifikasi:

  1. Notifikasi Sukses: "Deteksi bau kaki kucing berhasil! Kaki kucing Anda wangi seperti bunga melati." (Warna hijau)
  2. Notifikasi Peringatan: "Peringatan: Ada potensi bau kaki kucing samar-samar. Segera lakukan pengecekan!" (Warna kuning)
  3. Notifikasi Error: "ERROR! Sensor bau kaki kucing mendadak macet. Mungkin ada tikus numpang lewat..." (Warna merah)

Setiap notifikasi harus punya tombol "x" (silang) untuk di-dismiss (kita nggak akan bikin fungsi JavaScript-nya di sini, cukup visualnya saja). Dan pastikan setiap notifikasi itu punya shadow biar kelihatan ngambang gitu!

Selamat ngoding, jangan sampai bau kaki kucing bikin kalian ikutan error!


<!-- Jawabanmu di sini. Coba rangkai sendiri kelas-kelas Tailwind-nya! -->

<!-- Contoh Notifikasi Sukses -->
<div class="relative bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded shadow-md m-4" role="alert">
  <div class="flex justify-between items-center">
    <strong class="font-bold">Sukses!</strong>
    <span class="block sm:inline ml-2">Deteksi bau kaki kucing berhasil! Kaki kucing Anda wangi seperti bunga melati.</span>
    <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
      <svg class="fill-current h-6 w-6 text-green-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.15a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.15 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
    </span>
  </div>
</div>

<!-- Tambahkan notifikasi warning dan error di sini dengan styling yang berbeda! -->

<!-- Contoh Notifikasi Peringatan -->
<div class="relative bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded shadow-md m-4" role="alert">
  <div class="flex justify-between items-center">
    <strong class="font-bold">Peringatan!</strong>
    <span class="block sm:inline ml-2">Ada potensi bau kaki kucing samar-samar. Segera lakukan pengecekan!</span>
    <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
      <svg class="fill-current h-6 w-6 text-yellow-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.15a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.15 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
    </span>
  </div>
</div>

<!-- Contoh Notifikasi Error -->
<div class="relative bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded shadow-md m-4" role="alert">
  <div class="flex justify-between items-center">
    <strong class="font-bold">Error!</strong>
    <span class="block sm:inline ml-2">Sensor bau kaki kucing mendadak macet. Mungkin ada tikus numpang lewat...</span>
    <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
      <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.15a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.15 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
    </span>
  </div>
</div>

Gimana, asyik kan mainan kelas utilitasnya Tailwind? Nggak kerasa kalau ngoding itu bisa sefleksibel ini. Terus semangat belajar dan sampai jumpa di Part selanjutnya!

Bagikan Artikel Ini