Katalog Materi
15 modul mengikuti silabus resmi. Setiap modul berisi penjelasan singkat, contoh live yang bisa diinteraksi, dan decision rule untuk membantu kamu memilih pendekatan yang tepat.
Pengenalan & Instalasi
Apa itu Tailwind CSS, mengapa pendekatan utility-first unggul, dan cara memasangnya di SvelteKit.
Struktur Utility-First
Cara membaca utility: pola properti-nilai, urutan penulisan yang konsisten, dan kapan mengekstrak komponen.
Styling Text & Font
Mengatur ukuran, warna, ketebalan, keluarga font, transformasi, dan line-height teks.
Layout: Margin & Padding
Mengatur jarak dengan p-* (dalam) dan m-* (luar) memakai skala spacing 4px yang konsisten.
Warna, Background & Border
Palet warna bawaan, background, serta border: warna, ketebalan, dan radius sudut.
Flexbox
Layout satu dimensi: flex, direction, justify, items, wrap, dan grow/shrink.
Grid Layout
Layout dua dimensi: grid-cols, gap, kolom dinamis, dan col-span untuk tile istimewa.
Responsive Design
Breakpoint bawaan sm-md-lg-xl dan pola pikir mobile-first: dasar dulu, varian ke atas.
Hover, Focus & Active
State interaktif: hover:, focus-visible:, active:, dan menggabungkannya dengan transisi.
Custom Breakpoints
Menambah atau menimpa breakpoint lewat @theme CSS-first dan breakpoint arbitrary satu-off.
Typography Plugin
Plugin resmi prose untuk menata konten artikel panjang dengan satu class.
Dark Mode
Strategi class-based dark mode, demo ter-scope, dan keputusan situs ini yang light-only.
Transisi & Animasi
Transisi halus antar state, transformasi, animasi bawaan, dan respek prefers-reduced-motion.
Variabel & @theme
Design token CSS-first: warna, font, dan shadow kustom via @theme — fondasi design system situs ini.
Tips & Best Practice
Kelas secukupnya, urutan konsisten otomatis, kapan ekstrak komponen, dan checklist produksi §38.