Tailwind CSS adalah utility-first CSS framework yang paling populer di 2026. Kalau kamu belum pernah pakai, ini panduan untuk memulai.
Kenapa Tailwind?
- Tidak perlu nulis CSS manual
- Konsistensi design across pages
- Responsive design jadi mudah
- Dark mode built-in
- File CSS final sangat kecil (purged unused styles)
Utility Classes Dasar
<!-- Spacing -->
<div class="p-4 m-2 px-6 py-3">
<!-- Typography -->
<p class="text-sm text-gray-500 font-bold leading-relaxed">
<!-- Flexbox -->
<div class="flex items-center justify-between gap-4">
<!-- Grid -->
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<!-- Border & Radius -->
<div class="border border-gray-200 rounded-lg">
<!-- Background & Color -->
<div class="bg-white text-black dark:bg-gray-900 dark:text-white">
Responsive Design
Mobile-first approach:
<div class="text-sm md:text-base lg:text-lg">
<!-- sm: 640px, md: 768px, lg: 1024px, xl: 1280px -->
Hover, Focus, dll
<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2 active:bg-blue-700">
Tailwind membuat styling jadi cepat dan konsisten. Coba di project kecil dulu, dan kamu akan ketagihan.