Komposisi Class Saat Runtime Bukan Generasi CSS

Sat, 19 Sep 2026 00:00:00 +0000

Function yang menghasilkan string class dan compiler yang mengeluarkan CSS menyelesaikan masalah yang berbeda, walaupun keduanya pada akhirnya dapat menghasilkan atribut `class` di browser.

Perbedaan itu penting ketika recipe komponen Tailwind dimulai seperti ini:

copied = false, 1600)" class="absolute right-3 top-3 z-10 rounded-lg border border-line-strong bg-surface px-2 py-1 font-mono text-[0.8rem] text-muted opacity-0 transition group-hover:opacity-100 hover:bg-ink hover:text-white dark:border-night-line dark:bg-night dark:text-night-muted dark:hover:bg-white dark:hover:text-ink">

const button = tv({
  base: 'inline-flex rounded-md',
  variants: {
    color: {
      success: 'bg-green-500 hover:bg-green-700',
    },
    disabled: {
      true: 'pointer-events-none opacity-50',
    },
  },
  compoundVariants: [
    {
      color: 'success',
      disabled: true,
      class: 'bg-green-300 hover:bg-green-300',
    },
  ],
});

Mudah untuk mengira bahwa build step dapat mengubah recipe tersebut menjadi selector semantik seperti:

Token Tema Berbasis Warna Logo untuk Antarmuka Web yang Berkarakter

Sat, 19 Sep 2026 00:00:00 +0000

Palet warna logo bukan design system. Menyalin warna dominan logo ke button, card, background, border, dan gradient biasanya membuat halaman terasa terlalu penuh warna, bukan lebih berkarakter. Langkah yang lebih berguna adalah menerjemahkan logo menjadi token tema semantik: sekumpulan role kecil yang dapat dipakai komponen secara konsisten.

Pemisahan ini semakin penting ketika interface memakai pola visual yang ekspresif seperti bento grid, typography berukuran besar, surface transparan, dan scroll motion. Teknik-teknik tersebut dapat membentuk identitas yang kuat, tetapi hasilnya baru terasa utuh jika warna, hierarchy, dan movement berasal dari satu sistem yang sama, bukan dari kumpulan efek yang ditempel terpisah.

CSS on Nalar

Komposisi Class Saat Runtime Bukan Generasi CSS

Token Tema Berbasis Warna Logo untuk Antarmuka Web yang Berkarakter