Tailwind CSS: Styling Cepat Tanpa Menulis CSS Manual

Tailwind CSS adalah utility-first CSS framework yang mengubah cara developer menulis styling. Daripada membuat class seperti .card-title atau .btn-primary, kamu langsung pakai utility classes di HTML.

Sebelum vs Sesudah Tailwind

CSS tradisional:

<button class="btn-primary">Klik Saya</button>

.btn-primary {
  padding: 0.75rem 1.5rem;
  background-color: #f97316;
  color: white;
  font-weight: bold;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: #ea580c;
}

Dengan Tailwind:

<button class="rounded-lg bg-orange-500 px-6 py-3 font-bold text-white transition hover:bg-orange-600">
  Klik Saya
</button>

Tidak perlu file CSS terpisah, tidak perlu memikirkan nama class, dan hasilnya persis sama.

Kenapa Tailwind?

1. Cepat — Tidak perlu switching antara HTML dan CSS file
2. Konsisten — Design system bawaan (spacing, colors, typography)
3. Kecil — Hanya CSS yang kamu pakai yang masuk ke production (purging)
4. Responsif — Prefix sm:, md:, lg: untuk breakpoints
5. Dark mode — Prefix dark: untuk dark mode
6. Populer — Dipakai oleh Vercel, Shopify, Netflix, dan komunitas besar

Konsep Dasar

Spacing

Tailwind menggunakan skala spacing yang konsisten:

<!-- Padding -->
<div class="p-4">Padding semua sisi (1rem)</div>
<div class="px-6 py-3">Padding horizontal 1.5rem, vertikal 0.75rem</div>

<!-- Margin -->
<div class="mt-8">Margin top 2rem</div>
<div class="mx-auto">Center horizontal</div>

<!-- Gap (untuk flex/grid) -->
<div class="flex gap-4">...</div>

Skala: 0, 1 (0.25rem), 2 (0.5rem), 3 (0.75rem), 4 (1rem), 6 (1.5rem), 8 (2rem), 12 (3rem), 16 (4rem), dst.

Warna

Tailwind punya palette warna yang lengkap:

<p class="text-gray-500">Teks abu-abu</p>
<p class="text-red-600">Teks merah</p>
<div class="bg-blue-100">Background biru muda</div>
<div class="border border-orange-500">Border oranye</div>

Setiap warna punya 11 shade: 50, 100, 200, … 900, 950.

Typography

<h1 class="text-3xl font-extrabold text-gray-900">Judul</h1>
<p class="text-lg leading-relaxed text-gray-600">Paragraf dengan line-height yang nyaman</p>
<span class="text-sm font-medium uppercase tracking-wide">Label</span>

Layout dengan Flexbox

<!-- Navbar -->
<nav class="flex items-center justify-between px-6 py-4">
  <span class="text-xl font-bold">Logo</span>
  <div class="flex gap-6">
    <a href="#" class="text-gray-600 hover:text-gray-900">Home</a>
    <a href="#" class="text-gray-600 hover:text-gray-900">About</a>
  </div>
</nav>

<!-- Center content -->
<div class="flex min-h-screen items-center justify-center">
  <h1>Centered!</h1>
</div>

Layout dengan Grid

<!-- Card grid responsif -->
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
  <div class="rounded-xl border p-6">Card 1</div>
  <div class="rounded-xl border p-6">Card 2</div>
  <div class="rounded-xl border p-6">Card 3</div>
</div>

Responsive Design

Tailwind menggunakan mobile-first approach. Prefix breakpoint diterapkan ke atas:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
  <!-- 1 kolom di mobile, 2 di tablet, 3 di desktop -->
</div>

<p class="text-sm md:text-base lg:text-lg">
  <!-- Teks membesar seiring layar -->
</p>

<div class="px-4 md:px-8 lg:px-16">
  <!-- Padding bertambah seiring layar -->
</div>

Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px).

Dark Mode

Tambahkan prefix dark: untuk styling dark mode:

<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
  <h1 class="text-gray-900 dark:text-white">Judul</h1>
  <p class="text-gray-600 dark:text-gray-400">Paragraf</p>
  <button class="bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-500">
    Tombol
  </button>
</div>

Coba Tailwind Classes

Pilih preset atau edit class langsung dan lihat hasilnya:

Preset

CardButton PrimaryBadgeAlertAvatarInput

Classesrounded-2xl border border-gray-200 bg-white p-6 shadow-md

Preview

Card Component

<div class="rounded-2xl border border-gray-200 bg-white p-6 shadow-md">Card Component</div>

Contoh Komponen Nyata

Card

<div class="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm transition hover:shadow-md dark:border-gray-700 dark:bg-gray-800">
  <img src="cover.jpg" alt="Cover" class="h-48 w-full object-cover" />
  <div class="p-6">
    <h3 class="text-lg font-bold text-gray-900 dark:text-white">
      Judul Card
    </h3>
    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
      Deskripsi singkat card ini.
    </p>
    <button class="mt-4 rounded-lg bg-orange-500 px-4 py-2 text-sm font-bold text-white hover:bg-orange-600">
      Selengkapnya
    </button>
  </div>
</div>

Badge

<span class="rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-700">
  Aktif
</span>
<span class="rounded-full bg-red-100 px-3 py-1 text-xs font-medium text-red-700">
  Error
</span>

Input

<input
  type="text"
  placeholder="Cari..."
  class="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-orange-500 focus:outline-none focus:ring-2 focus:ring-orange-500/20 dark:border-gray-600 dark:bg-gray-800"
/>

Tips Tailwind

1. Install Tailwind CSS IntelliSense — Extension VS Code yang wajib, autocomplete semua class
2. Gunakan @apply seperlunya — Untuk styling yang benar-benar sering diulang
3. Konsisten dengan spacing — Jangan campur p-3 dan p-[13px], gunakan skala bawaan
4. Baca dokumentasi — tailwindcss.com/docs adalah salah satu dokumentasi terbaik di dunia web dev
5. cn() helper — Kalau pakai React, gunakan clsx + tailwind-merge untuk conditional classes

Tailwind vs CSS Biasa

Aspek	CSS Biasa	Tailwind
Kecepatan development	Sedang	Cepat
Konsistensi desain	Manual	Otomatis (design system)
Bundle size	Bisa besar	Kecil (hanya yang dipakai)
Belajar	Belajar CSS	Belajar CSS + class Tailwind
Maintainability	Class naming jadi masalah	Tidak ada naming problem

Tailwind bukan pengganti CSS — kamu tetap perlu paham CSS dasar (Flexbox, Grid, positioning, box model). Tailwind hanya membuat penulisannya lebih cepat dan konsisten.

Langkah Selanjutnya

1. Install — npm install tailwindcss dan ikuti panduan setup
2. Tailwind UI — Komponen premium dari pembuat Tailwind (ada yang gratis)
3. Headless UI — Komponen accessible tanpa styling (perfect untuk Tailwind)
4. shadcn/ui — Library komponen React + Tailwind yang sangat populer