Jadi Arsitek UI: Bikin Komponen Keren Pake Kumpulan Utility Tailwind!

Udah kenal sama seabrek utility class Tailwind? Udah tau juga cara bikin utility custom pake @utility? Mantap! Sekarang, saatnya kita liat gimana semua "kepingan LEGO" itu bisa kita susun jadi komponen antarmuka pengguna (UI components) yang sering kita temui di website.

Di bagian ini, kita gak bakal bikin komponen yang super rumit, tapi cukup buat ngasih gambaran gimana cara "berpikir secara Tailwind" pas ngebangun UI. Ingat, fokusnya adalah ngerangkai utility classes langsung di HTML buat dapetin tampilan yang kita mau.

Kita masih pake setup CDN @tailwindcss/browser@4 ya, jadi semua contoh ini bisa langsung kamu coba!

Contoh 1: Tombol (Button) dengan Berbagai Variasi

Tombol itu salah satu elemen UI paling dasar tapi penting banget. Yuk, kita bikin beberapa variasi tombol pake Tailwind.

HTML Dasar untuk Tombol:

<button class="[...utility classes di sini...]">Teks Tombol</button>
<!-- atau -->
<a href="#" class="[...utility classes di sini...]">Link Tampil Kayak Tombol</a>

A. Tombol Primer (Primary Button): Biasanya tombol utama buat aksi paling penting.

<button 
  class="bg-blue-500 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md 
         focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75
         active:bg-blue-800 active:scale-95 transition-all duration-150 ease-in-out">
  Tombol Primer
</button>

Bedah Utility-nya:

• bg-blue-500: Background biru (shade 500).
• hover:bg-blue-700: Pas di-hover, background jadi biru lebih tua.
• text-white: Warna teks putih.
• font-semibold: Teks agak tebal.
• py-2 px-4: Padding vertikal 0.5rem, horizontal 1rem.
• rounded-lg: Sudut melengkung ukuran large.
• shadow-md: Efek bayangan medium.
• focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75: Style buat pas tombol dapet fokus (penting buat aksesibilitas keyboard!). Ngilangin outline default, nambahin "ring" biru.
• active:bg-blue-800 active:scale-95: Style pas tombol diteken (background lebih gelap, tombol kayak "masuk").
• transition-all duration-150 ease-in-out: Biar semua perubahan (background, transform) jadi smooth animasinya.

B. Tombol Sekunder (Secondary Button): Biasanya buat aksi alternatif atau kurang penting.

<button 
  class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg border border-gray-300
         focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
         active:bg-gray-400 transition-colors duration-150 ease-in-out">
  Tombol Sekunder
</button>

• Bedanya di warna background (bg-gray-200), warna teks (text-gray-800), dan ada border (border border-gray-300).

C. Tombol Outline: Tombol yang background-nya transparan, tapi punya border.

<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-lg
         focus:outline-none focus:ring-2 focus:ring-blue-400
         active:bg-blue-600 transition-all duration-150 ease-in-out">
  Tombol Outline
</button>

• bg-transparent: Background transparan.
• text-blue-700: Teksnya warna biru.
• border border-blue-500: Punya border biru.
• Pas di-hover: background jadi biru (hover:bg-blue-500), teks jadi putih (hover:text-white), border jadi transparan (hover:border-transparent).

Keren kan? Cuma dengan ngombinasiin utility, kita bisa bikin banyak variasi tombol!

Contoh 2: Kartu (Card) Sederhana

Kartu sering dipake buat nampilin potongan informasi yang terkait, kayak profil, produk, atau artikel.

<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white my-4 mx-auto">
  <!-- Bagian Gambar (Opsional) -->
  <img class="w-full h-48 object-cover" src="https://via.placeholder.com/400x250.png?text=Gambar+Kartu" alt="Gambar Ilustrasi Kartu"> 
  <!-- Ganti dengan path gambar yang relevan -->
 
  <!-- Bagian Konten Teks -->
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2 text-gray-800">Judul Kartu Keren Ini</div>
    <p class="text-gray-700 text-base">
      Ini adalah deskripsi singkat untuk kartu ini. Isinya bisa apa aja yang relevan 
      dengan konten yang mau kamu tampilin. Bisa beberapa baris juga lho.
    </p>
  </div>
 
  <!-- Bagian Tag/Kategori (Opsional) -->
  <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">#fotografi</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">#jalan-jalan</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mb-2">#alam</span>
  </div>
</div>

Bedah Utility Kartu:

• .max-w-sm: Lebar maksimal kartu (small). Ini bikin dia responsif.
• rounded-xl: Sudut sangat melengkung.
• overflow-hidden: Penting kalau gambar di dalemnya lebih gede dari kartu, biar gak "jebol" keluar dari sudut melengkung.
• shadow-lg: Bayangan besar.
• bg-white: Background kartu putih.
• my-4 mx-auto: Margin vertikal, dan margin horizontal auto buat ngenengahin kartu (kalau parent-nya block).
• Gambar (<img>):
  • w-full: Lebar gambar ngikutin lebar kartu.
  • h-48: Tinggi gambar tetap (misal, 12rem).
  • object-cover: Biar gambarnya ngisi area img tanpa distorsi (mirip background-size: cover).
• Konten Teks (.px-6 .py-4): Padding horizontal dan vertikal.
• Judul (.font-bold .text-xl .mb-2 .text-gray-800): Styling buat judul.
• Deskripsi (.text-gray-700 .text-base): Styling buat paragraf deskripsi.
• Tag (.inline-block .bg-gray-200 .rounded-full ...): Styling buat tag/kategori jadi kayak "pil" kecil.

Kamu bisa bikin banyak variasi kartu cuma dengan ganti-ganti utility background, shadow, padding, dan tipografinya!

Contoh 3: Notifikasi Alert Sederhana

Alert dipake buat nampilin pesan penting ke pengguna, misalnya pesan sukses, error, atau peringatan.

A. Alert Sukses:

<div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 my-4" role="alert">
  <p class="font-bold">Berhasil!</p>
  <p>Operasi yang Anda minta telah sukses dilakukan.</p>
</div>

B. Alert Error:

<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 my-4" role="alert">
  <p class="font-bold">Gagal Total!</p>
  <p>Maaf, terjadi kesalahan. Silakan coba lagi nanti.</p>
</div>

C. Alert Peringatan:

<div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 my-4" role="alert">
  <p class="font-bold">Perhatian!</p>
  <p>Ada beberapa item yang butuh perhatian Anda segera.</p>
</div>

Bedah Utility Alert:

• bg-{color}-100: Background warna terang dari palet warna (misal, hijau muda).
• border-l-4: Border kiri setebal 4px.
• border-{color}-500: Warna border kiri yang lebih pekat dari background.
• text-{color}-700: Warna teks yang kontras dan sesuai sama tema alert.
• p-4: Padding.
• my-4: Margin vertikal.
• role="alert": Atribut ARIA buat aksesibilitas, ngasih tau screen reader kalau ini pesan penting.
• Struktur HTML di dalemnya (<p class="font-bold"> dan <p>) buat judul dan isi alert.

"Berpikir Secara Tailwind"

Pas ngebangun komponen pake Tailwind, yang penting itu mikirin tampilan apa yang kamu mau, terus cari utility class yang sesuai buat ngewujudinnya. Prosesnya jadi kayak:

1. Bayangin dulu mau bikin apa (misal, tombol).
2. Pikirin properti CSS apa aja yang dibutuhin (background, warna teks, padding, border-radius, shadow, efek hover).
3. Cari utility class Tailwind yang ngewakilin properti-properti itu (di kepala atau di dokumentasi).
4. Rangkai class-class itu di elemen HTML-nya.
5. Liat hasilnya di browser (pake Live Server!), terus "iterasi" (tambah/ubah/apus class) sampe dapet tampilan yang pas.

Awalnya mungkin kerasa kayak nyari-nyari di kamus, tapi lama-lama kamu bakal hafal utility yang sering dipake dan prosesnya jadi cepet banget!

Dengan contoh-contoh ini, semoga kamu jadi makin kebayang gimana caranya "merajut" desain pake utility classes Tailwind. Gak ada batasan buat kreativitasmu! Kamu bisa bikin hampir semua jenis komponen UI cuma dengan ngombinasiin utility yang udah ada.

Di bagian terakhir panduan Tailwind ini, kita bakal kasih beberapa kata penutup dan ngasih tau ke mana kamu bisa ngelanjutin petualangan Tailwind-mu, termasuk soal setup pake build tool buat proyek yang lebih serius.