Panduan Lengkap Styling Modern dengan Tailwind CSS v4 & CSS Variables

Tailwind CSS v4 hadir dengan arsitektur kompilator baru yang ditulis dari awal menggunakan Rust (Oxide engine), menghilangkan kebutuhan file tailwind.config.js tradisional dan memindahkan seluruh konfigurasi langsung ke dalam file CSS utama.

Apa yang Baru di Tailwind CSS v4?

Beberapa perubahan fundamental yang membuat alur kerja styling jauh lebih elegan:

1. Konfigurasi Berbasis @theme: Variabel tema seperti warna, font, dan spacing dapat didefinisikan langsung dalam @theme di file CSS.
2. Kompilasi Super Cepat: Waktu build hingga 10x lebih cepat dibanding versi sebelumnya.
3. Container Queries Bawaan: Dukungan native tanpa perlu plugin tambahan.

/* globals.css */
@import "tailwindcss";

@theme {
  --color-primary: #6366f1;
  --color-primary-hover: #4f46e5;
  --font-display: 'Inter', sans-serif;
  --radius-custom: 1rem;
}

Contoh Implementasi Glassmorphism Card

Berikut adalah cara membuat kartu modern dengan border gradient dan efek blur menggunakan utility Tailwind CSS v4:

export function GlassCard() {
  return (
    <div className="relative overflow-hidden rounded-3xl border border-white/10 bg-white/5 p-8 backdrop-blur-xl transition-all duration-300 hover:border-cyan-500/40 hover:shadow-2xl hover:shadow-cyan-500/10 dark:border-white/10 dark:bg-zinc-900/40">
      <div className="absolute -top-12 -right-12 h-40 w-40 rounded-full bg-cyan-500/20 blur-3xl" />
      <h3 className="text-2xl font-bold tracking-tight text-foreground">Glassmorphism UI</h3>
      <p className="mt-3 text-muted-foreground leading-relaxed">
        Memanfaatkan backdrop-filter dan gradien subtle untuk efek kedalaman visual yang terasa premium.
      </p>
    </div>
  );
}

Kesimpulan

Tailwind CSS v4 menyederhanakan arsitektur CSS modern dengan menyatukan token desain ke dalam variabel CSS asli. Hal ini memudahkan pembuatan sistem tema yang konsisten dan sangat responsif.