1 menit baca

Membangun design tokens kustom di Tailwind v4

Cara mengubah Tailwind v4 dari "preset Tailwind" menjadi engine utility untuk design system milik sendiri.

Tailwind v4 punya superpower: @theme inline. Saya pakai ini supaya setiap utility seperti bg-(--color-bg) membaca token kustom, bukan preset Tailwind default.

Strategi

Definisikan satu source of truth di app/globals.css:

:root {
  --color-bg: #fafafa;
  --color-fg: #0f0f10;
  --color-accent: #0e8c6b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0a0a0b;
    --color-fg: #f5f5f7;
    --color-accent: #34d399;
  }
}

@theme inline {
  --color-bg: var(--color-bg);
  --color-fg: var(--color-fg);
  --color-accent: var(--color-accent);
}

Pemakaian di komponen

<button className="bg-(--color-accent) text-(--color-accent-fg)">
  Hubungi
</button>

Saat token diubah—dark/light, brand baru, eksperimen—tidak ada utility yang perlu diubah. Itu kekuatan utama design tokens.

Kapan utility default berguna

Untuk spacing, sizing, typography skala, flex, grid—Tailwind default sudah baik. Token kustom hanya untuk hal yang berubah lintas tema atau brand: warna, radius, motion, font family.

Pondasi yang dipahami selalu lebih kuat dari preset yang diadopsi mentah-mentah.