Tailwind CSS adalah utility-first CSS framework yang memudahkan kamu untuk membangun desain yang responsif dan konsisten. Berikut adalah struktur pembelajaran untuk memahami dan menggunakan Tailwind CSS.
#### **Hari 1-3: Pengenalan Tailwind CSS**
1. **Instalasi Tailwind CSS:**
- **Melalui CDN**: Tambahkan link CDN Tailwind CSS di dalam file HTML kamu.
```html
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
```
- **Menggunakan NPM**: Instal Tailwind melalui npm jika kamu menggunakan bundler seperti Webpack atau Parcel.
```bash
npm install tailwindcss
```
2. **Dasar-Dasar Tailwind:**
- Memahami **utility classes** (misalnya, `p-4` untuk padding, `text-center` untuk teks yang terpusat, `bg-blue-500` untuk latar belakang biru).
- Menyusun layout menggunakan Flexbox dan Grid dengan kelas Tailwind.
3. **Membuat Layout Sederhana:**
- Praktik membuat layout dengan Tailwind seperti header, konten, dan footer.
- Contoh struktur HTML dengan Tailwind:
```html
<div class="flex flex-col min-h-screen">
<header class="bg-blue-500 text-white p-4">Header</header>
<main class="flex-grow p-4">Konten Utama</main>
<footer class="bg-gray-800 text-white p-4">Footer</footer>
</div>
```
#### **Hari 4-7: Menggunakan Tailwind untuk Styling Cepat dan Konsisten**
1. **Membuat Komponen:**
- Buat komponen UI seperti tombol, form, dan kartu menggunakan Tailwind.
```html
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
Daftar
</button>
```
2. **Membuat Halaman Responsif:**
- Gunakan media queries bawaan Tailwind untuk membuat desain yang responsif.
- Contoh penggunaan:
```html
<div class="p-4 md:p-8 lg:p-12">
Konten Responsif
</div>
```
3. **Membuat Custom Utilities:**
- Pelajari cara mengkonfigurasi Tailwind dengan file `tailwind.config.js` untuk menambah custom colors, spacing, dll.
4. **Praktik Proyek Kecil:**
- Buat proyek kecil seperti landing page atau halaman portofolio untuk menerapkan apa yang telah dipelajari.
- Pastikan untuk menggunakan utility classes dan mempraktikkan responsivitas.
### Tugas Akhir untuk Materi Tailwind CSS
1. **Proyek Akhir:**
- Buatlah sebuah halaman web menggunakan Tailwind CSS yang mencakup:
- Header dengan logo dan navigasi.
- Seksi konten utama yang menggunakan grid atau flexbox.
- Footer yang informatif.
- Gunakan komponen yang telah dibuat untuk tombol, form, dan kartu.
Dengan mengikuti materi di atas, kamu akan mendapatkan pemahaman yang baik tentang bagaimana menggunakan Tailwind CSS dalam proyek web.