Belajar Tailwind CSS v4: dari instalasi sampai design token

Tailwind CSS mengganti file CSS panjang dengan utility class langsung di HTML. Awalnya terlihat “kotor” — sampai kamu sadar tidak pernah lagi memikirkan penamaan class atau takut menghapus CSS lama. Situs yang sedang kamu baca dibangun penuh dengan Tailwind v4; tutorial ini caraku memakainya.

1. Instalasi (Tailwind v4)

Prasyarat: Node.js 20+. Dua jalur, pilih sesuai project:

Dengan Vite (Vue, React, Astro):

npm install tailwindcss @tailwindcss/vite

// vite.config.js
import tailwindcss from "@tailwindcss/vite";
export default { plugins: [tailwindcss()] };

Dengan CLI (project apa pun — cara yang dipakai situs ini):

npm install tailwindcss @tailwindcss/cli
npx @tailwindcss/cli -i styles/input.css -o public/site.css --watch

Lalu satu baris di file CSS-mu — di v4 tidak ada lagi tailwind.config.js wajib:

/* styles/input.css */
@import "tailwindcss";

2. Cara berpikirnya: utility, bukan komponen CSS

<!-- Dulu: tulis CSS, beri nama, jaga selamanya -->
<button class="btn-primary">Beli</button>

<!-- Tailwind: gaya langsung terbaca di tempat -->
<button class="bg-teal-600 px-4 py-2 text-white hover:bg-teal-700">Beli</button>

Kelas yang paling sering kamu pakai minggu pertama: spacing (p-4, mt-6, gap-3), layout (flex, grid, items-center, justify-between), tipografi (text-sm, font-semibold, tracking-tight), warna (bg-*, text-*, border-*).

3. Responsive & state: prefix, bukan media query

<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
  <!-- 1 kolom di HP, 3 kolom mulai 768px -->
</div>

<a class="text-zinc-500 transition-colors hover:text-zinc-900">Link</a>

Aturannya mobile-first: kelas tanpa prefix berlaku di semua ukuran, md: menimpanya mulai 768px ke atas. Ini satu-satunya model mental yang perlu kamu kunci.

4. Design token dengan @theme (v4)

Warna brand situs ini didefinisikan sekali, lalu jadi utility otomatis:

@import "tailwindcss";

@theme {
  --color-ink: #09090b;
  --color-accent: #0d9488;
  --font-display: "Geist", sans-serif;
}

Sekarang text-ink, bg-accent, font-display tersedia di mana-mana — konsistensi tanpa disiplin ekstra.

5. Kelas berulang? Komponen, bukan @apply

Kalau deretan kelas yang sama muncul di lima tempat, jangan buru-buru @apply — ekstrak jadi komponen (JSX/Blade/Vue) supaya markup + gayanya satu paket. @apply kupakai hemat, hanya untuk pola global seperti .btn-primary di design system.

Tips dari pengalaman

• Editor wajib pasang ekstensi Tailwind CSS IntelliSense — autocomplete + preview warna mengubah pengalaman belajar total.
• Tailwind hanya men-generate kelas yang tertulis di file yang dipindainya — kelas yang dirakit dinamis ("text-" + warna) tidak akan ada di output. Tulis kelas lengkap.
• Bug klasik yang pernah menggigitku di situs ini: konten min-width melebihi viewport HP. Penawarnya hafalkan trio min-w-0, truncate, dan flex-wrap.
• v4 jauh lebih cepat dan config-nya CSS-first — kalau tutorial lain menyuruhmu membuat tailwind.config.js + content: [...], itu gaya v3.