Pengenalan & Instalasi
Apa itu Tailwind CSS, mengapa pendekatan utility-first unggul, dan cara memasangnya di SvelteKit.
Apa itu Tailwind CSS?
Tailwind adalah framework CSS utility-first. Alih-alih menulis class semantik besar seperti .card lalu mendefinisikan isinya di file CSS, kamu menyusun tampilan langsung dari utility kecil: p-4 untuk padding, text-lg untuk ukuran, rounded-xl untuk sudut.
Hasilnya: tidak ada CSS mati yang menumpuk, tidak ada perebutan nama class, dan perubahan UI terasa cepat karena semuanya ada di tempat yang kamu lihat.
Decision Rule
Mental model: kebutuhan UI → HTML semantic → utility. Jika nilai berulang di banyak tempat, naikkan ke token @theme (Modul 14).
Instalasi di SvelteKit (Vite)
Situs ini sendiri memakai integrasi resmi Tailwind v4 untuk Vite: satu plugin di vite.config.ts, satu baris @import di CSS, tanpa file config.
Versi 4 adalah era CSS-first: semua kustomisasi (token, variant, utility) ditulis di CSS, bukan di tailwind.config.js seperti v3.
# 1) Pasang plugin
bun add tailwindcss @tailwindcss/vite
// 2) vite.config.ts
import tailwindcss from '@tailwindcss/vite';
plugins: [tailwindcss()]
/* 3) src/routes/layout.css */
@import 'tailwindcss';