Tailwind CSS v4 untuk Pemula: Memahami Utility dan Design Tokens

Tailwind CSS v4 untuk Pemula: Memahami Utility dan Design Tokens

Saat pertama kali melihat Tailwind, reaksi yang wajar adalah, “Kenapa class HTML-nya banyak sekali?” Pertanyaan itu masuk akal. Tailwind memang mengambil pendekatan berbeda dibanding menulis satu class CSS besar untuk setiap komponen.

Alih-alih memberi nama .kartu-artikel lalu menulis seluruh gayanya di stylesheet, kita merangkai utility kecil seperti p-4, border, dan text-sm. Pendekatan ini membantu ketika bekerja dengan sistem desain yang konsisten, tetapi tetap membutuhkan disiplin.

Cara berpikir utility-first

Perhatikan contoh sederhana:

<article class="rounded border p-4">
  <h2 class="text-lg font-bold">Judul Artikel</h2>
  <p class="mt-2 text-sm">Ringkasan singkat artikel.</p>
</article>

p-4 mengatur padding, mt-2 memberi jarak di atas paragraf, dan text-lg memilih ukuran huruf. Kode ini cukup mudah dipahami jika kamu sudah mengenal dasar CSS seperti padding, margin, dan font-size.

Saran saya: pelajari CSS biasa terlebih dahulu. Tailwind tidak mengganti konsep CSS, melainkan memberi cara praktis untuk menerapkannya.

Memasang Tailwind v4 pada Astro

Cara manual mengikuti dokumentasi resmi:

npm install tailwindcss @tailwindcss/vite

Di astro.config.mjs, tambahkan tailwindcss() sebagai plugin Vite. Kemudian buat stylesheet global:

@import "tailwindcss";

Versi 4 mendukung konfigurasi bertema CSS-first. Ini memudahkan pengelolaan warna, spacing, dan font tanpa perlu membuat berkas konfigurasi yang terlalu panjang untuk kebutuhan dasar.

Mengatur desain responsif

Misalnya kamu ingin dua kolom di ponsel dan empat kolom di desktop:

<div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
  <!-- kartu artikel -->
</div>

Prefix lg: berarti aturan berikutnya diterapkan mulai breakpoint besar. Tidak semua layout harus mengikuti pola yang sama. Area baca artikel, misalnya, justru biasanya lebih nyaman dibatasi lebarnya daripada menggunakan semua ruang layar.

Jangan membuat style jadi acak

Kesalahan yang sering terjadi adalah memilih warna baru untuk setiap bagian: satu tombol biru, card ungu, border abu kehijauan. Kalau tidak direncanakan, website cepat kehilangan identitas.

Mulailah dari beberapa token: warna background, teks utama, teks sekunder, border, dan aksen. Buat komponen reusable untuk header, tombol, card, dan tag. Dengan cara ini, memperbarui tema tidak harus mengedit puluhan file.

Kapan masih perlu CSS biasa?

Tailwind tidak melarang kamu menulis CSS. Typographic content dari Markdown, state yang kompleks, dan aturan yang panjang kadang lebih bersih diletakkan di stylesheet khusus. Yang penting adalah konsistensi, bukan mengejar semua elemen harus memakai utility.

Hasil akhir yang bagus adalah kode yang mudah dibaca oleh dirimu enam bulan dari sekarang. Pilih pendekatan yang paling membantu, bukan yang membuat markup terlihat paling ramai.