Tailwind CSS
Utility-first CSS framework untuk styling cepat dengan class utilities.
Tailwind CSS adalah CSS framework yang menggunakan pendekatan utility-first — menyediakan class-class kecil yang masing-masing melakukan satu hal spesifik (misalnya flex, pt-4, text-center, bg-blue-500). Developer membangun UI dengan menggabungkan utility classes langsung di HTML/JSX, tanpa menulis CSS custom. Keuntungan: development lebih cepat (tidak perlu switch file antara CSS dan HTML), file size kecil di production (hanya class yang dipakai di-include, sisanya di-remove oleh PurgeCSS/JIT), konsisten (design system terdefinisi), dan responsive mudah (prefix sm:, md:, lg:). Tailwind juga menyediakan component primitives melalui @tailwindcss/forms, @tailwindcss/typography, dan Headless UI.
Contoh Kode
<!-- Tailwind CSS utility classes -->
<div class="flex items-center justify-between px-6 py-4 bg-white shadow-md rounded-lg">
<div class="flex items-center gap-3">
<img src="avatar.jpg" class="w-10 h-10 rounded-full object-cover" />
<div>
<h3 class="font-semibold text-gray-900">Budi Santoso</h3>
<p class="text-sm text-gray-500">Software Engineer</p>
</div>
</div>
<button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
Follow
</button>
</div>