Panduan Dasar Tailwind CSS untuk Pemula
05 February 2026
Admin
2 min read
Panduan ini akan fokus pada konsep membuat layout dengan Tailwind CSS. Bayangkan Tailwind CSS seperti kumpulan balok LEGO. Alih-alih membuat satu balok besar yang sudah jadi (seperti .card di CSS biasa), Anda menyusun banyak balok kecil (bg-white, p-4, rounded-lg) untuk membentuk komponen yang Anda inginkan.
1. Apa itu Tailwind CSS? (Konsep Utility-First)
Di CSS tradisional, Anda mungkin menulis ini di file .css:
/* style.css */
.my-button {
background-color: blue;
color: white;
padding: 8px 16px;
border-radius: 4px;
}
Lalu di HTML:
<button class="my-button">Klik Saya</button>
Di Tailwind CSS, Anda langsung menerapkan "kelas utilitas" di HTML:
<button class="bg-blue-500 text-white py-2 px-4 rounded">Klik Saya</button>
Tidak ada file CSS kustom yang dibutuhkan! Semua sudah ada di dalam kelas-kelas Tailwind.
2. Cara Mulai Menggunakan Tailwind CSS (Setup Cepat).
Cara termudah untuk mencoba adalah dengan CDN. Cukup tambahkan satu baris ini di dalam tag <head> file HTML Anda.<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Latihan Tailwind</title> <!-- Tambahkan baris ini --> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <!-- Konten Anda di sini --> </body> </html>
Sekarang Anda bisa langsung menggunakan semua kelas Tailwind!
