Lesson 1
Apa Itu Tailwind CSS?
Pusing nulis CSS custom terus-menerus? Kenali Tailwind CSS, sebuah framework CSS utility-first yang memungkinkan Anda membangun desain modern langsung di HTML, dan apa yang baru di v4.0.
Lesson 2
Kuis: Belum dikerjakanSetup Tailwind via CDN
Langsung ngoding tanpa ribet! Pelajari cara menggunakan Tailwind CSS v4.0 secara instan di halaman HTML Anda menggunakan CDN @tailwindcss/browser, termasuk konfigurasi dasar via tag <style>.
Lesson 3
Kuis: Belum dikerjakanKonsep Dasar Utility Classes
Bongkar filosofi utility-first Tailwind CSS! Pelajari bagaimana class-class kecil dan spesifik (utility classes) bisa dirangkai langsung di HTML untuk menciptakan desain yang kompleks dan kustom.
Lesson 4
Kuis: Belum dikerjakanStyling Dasar dengan Tailwind
Waktunya praktik! Pelajari cara menggunakan utility classes fundamental di Tailwind CSS untuk mengatur jarak (padding, margin), ukuran, tipografi, warna, background, border, dan efek dasar lainnya.
Lesson 5
Kuis: Belum dikerjakanLayouting dengan Utility Tailwind
Bangun layout yang kompleks dengan mudah! Pelajari cara menggunakan utility classes Tailwind CSS untuk menerapkan Flexbox dan Grid, mengatur perataan, urutan, dan celah antar elemen.
Lesson 6
Kuis: Belum dikerjakanDesain Responsif dengan Tailwind
Pastikan websitemu keren di semua ukuran layar! Pelajari cara menggunakan modifier breakpoint responsif (sm, md, lg, xl) di Tailwind CSS untuk menerapkan style berbeda pada perangkat mobile, tablet, dan desktop.
Lesson 7
Kuis: Belum dikerjakanState Variants Tailwind
Bikin elemenmu merespon interaksi pengguna! Pelajari cara menggunakan state variants di Tailwind CSS seperti hover, focus, active, dan disabled untuk mengubah style secara dinamis.
Lesson 8
Kuis: Belum dikerjakanDark Mode dengan Tailwind
Bikin websitemu nyaman di mata dengan tema gelap! Pelajari cara kerja dan implementasi dark mode di Tailwind CSS menggunakan varian `dark:` yang praktis.
Lesson 9
Kuis: Belum dikerjakanKustomisasi Dasar Tailwind (CDN)
Bikin Tailwind lebih 'kamu banget'! Pelajari cara melakukan kustomisasi dasar seperti menambah warna, mengubah font, atau menyesuaikan breakpoint saat menggunakan Tailwind CSS v4.0 via CDN dengan directive `@theme`.
Lesson 10
Kuis: Belum dikerjakanCustom Utility Tailwind (@utility)
Perlu utility class yang lebih spesifik? Pelajari cara mendefinisikan class utility kustom Anda sendiri di Tailwind CSS v4 menggunakan directive `@utility`, lengkap dengan dukungan varian.
Lesson 11
Kuis: Belum dikerjakanContoh Komponen Sederhana Tailwind
Praktik langsung! Lihat bagaimana cara 'merajut' utility classes Tailwind CSS v4 untuk membangun komponen antarmuka pengguna (UI) yang umum seperti tombol, kartu, dan notifikasi alert.
Lesson 12
Penutup Tailwind CSS & Lanjutan
Kamu berhasil! Rangkuman singkat panduan Tailwind CSS, kapan sebaiknya menggunakan pendekatan utility-first, dan pengenalan singkat ke setup dengan build tool untuk proyek produksi.
Module ini digunakan dalam 1 course. Progress, quiz akhir, dan sertifikat dikelola melalui course terkait.