Pola utilityKonsistensiEkstraksi komponen

Struktur Utility-First

Cara membaca utility: pola properti-nilai, urutan penulisan yang konsisten, dan kapan mengekstrak komponen.

Pola properti-nilai

Hampir semua utility mengikuti pola properti-nilai: bg-sky-500 berarti background-color: sky-500, text-lg berarti font-size besar. Varian ditulis sebagai prefix: hover:bg-sky-600 hanya aktif saat kursor di atas elemen, md:flex hanya di layar sedang ke atas.

Urutan class tidak mengubah hasil CSS, tapi urutan yang konsisten membuat kode mudah dipindai. Plugin prettier-plugin-tailwindcss merapikannya otomatis — situs ini memakainya.

Pola properti-nilai live

bg-sky-500 text-lg rounded-xl hover:bg-sky-600 md:flex

Kapan utility, kapan komponen?

Jika satu blok class benar-benar berulang di banyak file dan punya makna domain (mis. tombol utama), ekstrak menjadi komponen atau utility @utility. Jangan buru-buru: ekstraksi prematur justru menyembunyikan detail.

css

/* @utility: gunakan hemat, hanya untuk pola yang stabil */
@utility btn-primary {
	border: 2px solid var(--neo-line);
	background-color: var(--color-neo-yellow);
	font-weight: 700;
}

Decision Rule

Sekali pakai → utility langsung. Berulang + bermakna domain → komponen. Butuh CSS khusus → @apply / @utility.