Belajar Tailwind CSS - Design Tokens & Integrasi dengan Design System

#Pendahuluan

Seiring project membesar, kebutuhan akan satu sumber kebenaran desain menjadi kritis. Di episode 10 kita membahas design tokens: menyimpannya di tailwind.config.js, mengekspos sebagai CSS variables, menyinkronkan dari Figma, dan membangun library komponen yang konsisten.

Design system yang baik membuat tim tidak lagi berdebat soal #3b82f6 versus #2563eb. Semua nilai hidup di satu tempat, dikelola bersama antara desain dan engineering, dan diakses lewat nama yang konsisten di mana pun.

#Menyimpan Token di Config dan Expose via CSS Variables

Definisikan token sebagai CSS variables di root stylesheet:

Token sebagai CSS variables

:root {
  --color-brand: #3b82f6;
  --color-surface: #ffffff;
  --space-card: 1rem;
  --radius-card: 0.5rem;
}

Lalu hubungkan ke config:

Menghubungkan token ke config

theme: {
  extend: {
    colors: {
      brand: "var(--color-brand)",
      surface: "var(--color-surface)",
    },
    spacing: {
      card: "var(--space-card)",
    },
    borderRadius: {
      card: "var(--radius-card)",
    },
  },
},

Kombinasi ini memberi dua keuntungan: utility seperti bg-brand dan p-card terbentuk, sekaligus nilai dasarnya bisa diubah saat runtime lewat CSS. Pola colors: { brand: "var(--color-brand)" } inilah jembatan antara static config dan dynamic theming.

#Sinkronisasi Figma dan Tools

Figma dan Tailwind tidak saling bicara secara otomatis. Alur yang umum dipakai:

1. Token didesain di Figma memakai plugin seperti Tokens Studio.
2. Plugin mengekspor token ke format JSON.
3. JSON di-transform menjadi bagian dari config atau CSS variables.

Contoh token JSON sederhana:

{
  "color": {
    "brand": "#3b82f6",
    "surface": "#ffffff"
  },
  "spacing": {
    "card": "1rem"
  }
}

Tools seperti Style Dictionary bisa mengubah token JSON menjadi berbagai output — termasuk :root CSS variables atau potongan config Tailwind. Alur ini menjadikan Figma sebagai source of truth, dan config Tailwind sebagai turunannya.

#Membuat Library Komponen yang Konsisten

Library komponen dimulai dari keputusan kecil yang konsisten. Pertama, standarkan pattern dengan @apply di layer components:

Pattern standar komponen

@layer components {
  .btn {
    @apply inline-flex items-center justify-center rounded-card bg-brand px-4 py-2 font-medium text-white;
  }
  .card {
    @apply rounded-card border border-gray-200 bg-surface p-card shadow-sm;
  }
}

Lalu bungkus dengan API komponen di framework — misalnya komponen Button di React atau Svelte — yang menyediakan variants dan slot class. Untuk dipublikasikan sebagai paket, ikuti langkah ini:

npm init -y
npx tsc --init

Struktur paket yang umum: folder src berisi komponen, styles berisi CSS yang menyertakan @tailwind dan @layer components, serta tailwind-preset.js yang mengekspor token. Konsumen cukup menginstall dan mendaftarkan preset di config mereka:

Konsumen pakai preset library

module.exports = {
  content: ["./node_modules/@org/ui/**/*.{js,jsx}"],
  presets: [require("@org/ui/tailwind-preset")],
};

Pola presets: [require("@org/ui/tailwind-preset")] inilah yang membuat satu design language menyebar ke banyak aplikasi.

#Penutup

Episode 10 membawa kalian ke level design system: menyimpan token di config, mengeksposnya sebagai CSS variables, menyinkronkan dari Figma, dan membangun library komponen yang bisa dipublikasikan dan dipakai lintas project.

Inti yang harus dibawa pulang:

• CSS variables adalah jembatan antara config statis dan theming dinamis.
• Hubungkan token ke config memakai nilai var(...).
• Figma ke kode harus satu arah agar tidak menyimpang.
• Token JSON bisa di-transform memakai Style Dictionary.
• Standarkan pattern komponen dengan @apply dan @layer components.
• Preset Tailwind membuat design language bisa dibagikan antar project.

Di episode 11 selanjutnya kita akan membahas handling dynamic content & security — risiko kelas dinamis dari input pengguna, validasi dan safelist patterns, menghindari injection via class names, serta strategi content scanning untuk environment multi-tenant.