Tutorial ini cocok untuk pemula, siswa kursus komputer, dan pengajar HTML/CSS. Disusun bertahap dari nol hingga praktik mini project.
1. Apa itu Tailwind CSS?
Tailwind CSS adalah utility-first CSS framework yang memungkinkan kita membuat tampilan langsung dari class HTML tanpa menulis CSS manual.
Contoh CSS biasa:
button {
background: blue;
color: white;
padding: 10px;
}
Dengan Tailwind:
<button class="bg-blue-500 text-white px-4 py-2">Klik</button>
2. Cara Menggunakan Tailwind CSS (CDN – Paling Mudah)
Gunakan metode ini untuk latihan dasar.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Belajar Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
</body>
</html>
3. Utility Dasar Tailwind
a. Warna
<div class="bg-red-500 text-white p-4">Merah</div>
<div class="bg-green-500 text-white p-4">Hijau</div>
b. Padding & Margin
<div class="p-4 m-4 bg-gray-200">Box</div>
c. Font & Text
<p class="text-xl font-bold text-center">Teks Besar</p>
4. Layout dengan Flexbox
<div class="flex gap-4">
<div class="bg-blue-500 text-white p-4">Box 1</div>
<div class="bg-green-500 text-white p-4">Box 2</div>
</div>
Posisi tengah:
<div class="flex items-center justify-center h-screen">
<div class="bg-indigo-500 text-white p-6">Tengah</div>
</div>
5. Layout dengan Grid
<div class="grid grid-cols-3 gap-4">
<div class="bg-gray-300 p-4">1</div>
<div class="bg-gray-300 p-4">2</div>
<div class="bg-gray-300 p-4">3</div>
</div>
6. Button & Hover
<button class="bg-blue-600 hover:bg-blue-800 text-white px-4 py-2 rounded">
Simpan
</button>
7. Form dengan Tailwind
<form class="max-w-md mx-auto bg-white p-6 rounded shadow">
<label class="block mb-2">Nama</label>
<input type="text" class="w-full border p-2 mb-4 rounded">
<label class="block mb-2">Email</label>
<input type="email" class="w-full border p-2 mb-4 rounded">
<button class="bg-green-600 text-white px-4 py-2 rounded w-full">Kirim</button>
</form>
8. Card UI
<div class="max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
<img src="https://via.placeholder.com/400x200" class="w-full">
<div class="p-4">
<h2 class="text-xl font-bold">Judul</h2>
<p class="text-gray-600">Deskripsi singkat</p>
<button class="mt-3 bg-blue-500 text-white px-4 py-2 rounded">Detail</button>
</div>
</div>
9. Responsive Design
<div class="bg-red-500 md:bg-blue-500 lg:bg-green-500 text-white p-6">
Responsive Box
</div>
Keterangan:
md:layar tabletlg:layar desktop
10. Mini Project Latihan
Studi Kasus: Landing Page Kursus
Tugas:
- Header
- Section promo
- Card paket
- Tombol WhatsApp
<body class="bg-gray-100">
<header class="bg-blue-600 text-white p-6 text-center">
<h1 class="text-3xl font-bold">Kursus Komputer</h1>
<p>Belajar dari dasar sampai mahir</p>
</header>
<section class="max-w-5xl mx-auto grid md:grid-cols-3 gap-6 mt-8">
<div class="bg-white p-6 rounded shadow">
<h2 class="font-bold text-xl">Paket Pemula</h2>
<p>Ms Office Dasar</p>
<button class="mt-4 bg-green-500 text-white px-4 py-2 rounded">Daftar</button>
</div>
</section>
</body>
11. Latihan Mandiri
- Buat halaman login
- Buat tabel data siswa
- Buat dashboard sederhana
- Ubah tampilan jadi responsive
