Pilih bab, tulis kode, lihat hasilnya.
Setiap bab memiliki panduan singkat di kiri, editor HTML + Tailwind di tengah, dan preview live di kanan. Tidak perlu menebak hasil utility yang kamu tulis.
0/15 bab selesai
Pengenalan
Utility pertama
Tailwind menyusun tampilan dari utility kecil yang langsung ditempel pada HTML.
Utility-first
Kartu profil
Utility menjadi berguna ketika beberapa properti kecil bergabung membentuk komponen.
Text & Font
Skala tipografi
Gunakan text-*, font-*, tracking-*, dan leading-* untuk membangun hierarki.
Spacing
Margin & padding
Spacing scale membuat jarak antarelemen konsisten tanpa angka acak.
Visual styling
Warna & border
Warna dan border membangun identitas visual sebuah komponen.
Layout 1D
Navbar dengan Flexbox
Flexbox cocok untuk menyusun elemen dalam satu arah.
Layout 2D
Grid dua dimensi
Grid menangani hubungan baris dan kolom dengan lebih eksplisit.
Responsive
Mobile-first
Tulis gaya layar kecil sebagai dasar lalu naikkan layout dengan breakpoint.
Interaksi
Hover, focus, active
State variant membuat UI memberi respons terhadap tindakan pengguna.
Responsive lanjutan
Arbitrary values
Nilai arbitrary berguna untuk kebutuhan one-off yang belum pantas menjadi token.
Typography plugin
Artikel dengan prose
Plugin typography menata artikel panjang dengan satu class prose.
Theme state
Dark mode ter-scope
Varian dark dapat diterapkan pada subtree tertentu dengan custom variant.
Motion
Transisi & animasi
Motion dipakai untuk feedback dan perubahan state, bukan sekadar dekorasi.
Design system
Theme variables
Token reusable didefinisikan sekali melalui @theme lalu dipakai sebagai utility.
Integrasi
Mini dashboard
Gabungkan typography, spacing, grid, responsive, state, dan token dalam satu halaman.