Component Patterns

Component Patterns dengan Tailwind

Saat menggunakan Tailwind di aplikasi yang lebih besar, penting untuk mengelola class yang berulang agar kode tetap maintainable.

Masalah: Class yang Panjang dan Berulang

<!-- Membosankan jika ditulis berulang -->
<button class="inline-flex items-center gap-2 px-5 py-2.5 bg-violet-600
               hover:bg-violet-700 text-white text-sm font-semibold
               rounded-xl shadow-md transition-colors">
  Tombol 1
</button>

Solusi 1: @apply di CSS

/* src/index.css */
@layer components {
  .btn-primary {
    @apply inline-flex items-center gap-2 px-5 py-2.5;
    @apply bg-violet-600 hover:bg-violet-700;
    @apply text-white text-sm font-semibold;
    @apply rounded-xl shadow-md transition-colors;
  }
}

/* Penggunaan */
<button class="btn-primary">Tombol</button>

Solusi 2: Komponen React/Vue

// Lebih direkomendasikan untuk project React
const VARIANTS = {
  primary: "bg-violet-600 hover:bg-violet-700 text-white shadow-md",
  secondary: "bg-gray-100 hover:bg-gray-200 text-gray-700",
  danger: "bg-red-500 hover:bg-red-600 text-white",
};

function Button({ children, variant = "primary", ...props }) {
  return (
    <button
      className={`inline-flex items-center gap-2 px-5 py-2.5 text-sm
                  font-semibold rounded-xl transition-colors ${VARIANTS[variant]}`}
      {...props}
    >
      {children}
    </button>
  );
}

Untuk proyek React, lebih baik enkapsulasi class dalam komponen daripada menggunakan @apply. Komponen lebih mudah di-maintain dan lebih explicit.