Performance Optimization

Performance Optimization dengan Tailwind

Tailwind sudah dioptimasi untuk production secara default, tapi ada beberapa praktik terbaik yang perlu dipahami.

PurgeCSS — Otomatis di Tailwind v3+

Tailwind menggunakan tree-shaking otomatis. Hanya class yang benar-benar digunakan di file yang dikonfigurasi di content yang akan disertakan di bundle production.

// Hasil bundle production tanpa kelas yang tidak dipakai
// Development: ~3MB → Production: ~5-20KB!

Jangan Generate Class Dinamis

// ❌ SALAH — Tailwind tidak bisa mendeteksi class yang dikonstruksi
const color = "violet";
<div class={`bg-${color}-500`}>...</div>

// ✓ BENAR — Tulis class lengkap
const classes = {
  violet: "bg-violet-500",
  blue: "bg-blue-500",
  red: "bg-red-500",
};
<div class={classes[color]}>...</div>

Safelist untuk Class Dinamis

// tailwind.config.js — jika HARUS menggunakan class dinamis
export default {
  safelist: [
    "bg-violet-500",
    "bg-blue-500",
    { pattern: /bg-(red|green|blue)-(100|200|300)/ },
  ],
}

Tips Performance Lainnya

• Gunakan will-change dengan bijak untuk animasi yang di-hardware accelerate
• Hindari @apply berlebihan — lebih lambat dari utility langsung
• Aktifkan JIT mode (default di Tailwind v3) untuk build yang lebih cepat