Tailwind Mastery

Di materi ini kamu akan belajar Tailwind CSS, framework CSS bergaya utility-first yang sekarang dipakai di banyak proyek modern, dari landing page sederhana sampai dashboard aplikasi React yang besar. Kita mulai dari sejarah singkat kenapa cara menulis CSS terus berubah, lalu menyiapkan lingkungan kerja, mengenal konsep inti, dan membahas tiap kelompok utility: tipografi, spacing, warna, border, flexbox, grid, responsive, dark mode, kustomisasi, komposisi, animasi, sampai integrasi dengan komponen React.

Semua materi ditulis untuk Tailwind CSS v4 (versi yang kami verifikasi saat materi ini ditulis: tailwindcss 4.3.3, dicek dengan npm view tailwindcss version). Versi 4 membawa perubahan besar: konfigurasi pindah ke dalam file CSS (CSS-first), memakai @import "tailwindcss", @theme, @custom-variant, @utility, dan plugin @tailwindcss/vite. Kalau kamu menemukan tutorial lama yang memakai tailwind.config.js dan @tailwind base;, itu gaya v3. Kami akan menyebutnya sesekali sebagai catatan perbandingan, tetapi semua kode di sini memakai cara v4.