Panduan & Referensi
Kasus penggunaan dunia nyata untuk membantu Anda memulai dengan Dasar Tailwind CSS v4.0.
Panduan
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.
Panduan
Setup 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>.
Panduan
Konsep 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.
Panduan
Styling 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.
Panduan
Layouting 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.
Panduan
Desain 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.
Panduan
State 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.
Panduan
Dark 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.
Panduan
Kustomisasi 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`.
Panduan
Custom 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.
Panduan
Contoh 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.
Panduan
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.