8 Februari 2025·9 menit baca

Tailwind CSS Mastery: Teknik Beyond the Basics

Banyak developer hanya menggunakan 20% kemampuan Tailwind. Artikel ini membahas fitur-fitur tersembunyi dan pola arsitektur yang akan membuat kode CSS kamu jauh lebih efisien dan maintainable.

1. Arbitrary Values & Properties

Tailwind mendukung nilai arbitrary menggunakan notasi kurung kotak. Ini sangat berguna saat kamu butuh nilai yang tidak ada di design system standar Tailwind.

html·Arbitrary Values

<!-- Ukuran spesifik yang tidak ada di config default -->
<div class="w-[327px] h-[52px]"></div>

<!-- Warna hex atau rgb langsung -->
<div class="bg-[#1a2b3c] text-[rgb(255,100,50)]"></div>

<!-- CSS custom properties -->
<div class="bg-[var(--brand-color)]"></div>

<!-- CSS arbitrary property -->
<div class="[writing-mode:vertical-lr]">
  Teks Vertikal
</div>

2. Variant Management dengan cva

Library class-variance-authority (cva) adalah solusi terbaik untuk mengelola class kondisional di Tailwind. Sangat cocok untuk membangun design system yang scalable.

tsx·Button dengan cva

import { cva, type VariantProps } from "class-variance-authority";
import { clsx } from "clsx";

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-lg font-medium transition-all",
  {
    variants: {
      variant: {
        primary:   "bg-sky-500 text-white hover:bg-sky-600",
        secondary: "bg-zinc-100 text-zinc-900 hover:bg-zinc-200",
        ghost:     "text-zinc-600 hover:bg-zinc-100",
        danger:    "bg-red-500 text-white hover:bg-red-600",
      },
      size: {
        sm: "h-8 px-3 text-sm",
        md: "h-10 px-4 text-sm",
        lg: "h-12 px-6 text-base",
      },
    },
    defaultVariants: { variant: "primary", size: "md" },
  }
);

3. Jangan Buat Class Dinamis!

⚠️ Tailwind scanner hanya mendeteksi string yang lengkap. Jika kamu menulis bg-${color}-500, kelas tersebut tidak akan di-include dalam build production.

tsx·Cara yang Benar

// ❌ TIDAK bekerja di production
const color = "red";
<div className={`bg-${color}-500`}></div>

// ✅ Gunakan object mapping
const colorMap = {
  red:   "bg-red-500",
  blue:  "bg-blue-500",
  green: "bg-green-500",
};
<div className={colorMap[color]}></div>