Panduan Belajar Tailwind CSS dari Nol untuk Developer Pemula

Pernahkah kamu membuka proyek website lalu merasa pusing melihat ribuan baris kode CSS yang berantakan? Masalah ini sering terjadi karena pengaturan style yang tidak disiplin sejak awal. Tailwind CSS hadir untuk membantu kamu mengatasi hal tersebut dengan pendekatan utility-first.

Bayangkan Tailwind seperti kumpulan balok Lego yang sudah memiliki fungsi masing-masing. Kamu tidak perlu membuat setiap balok dari nol, cukup susun balok yang ada untuk membentuk komponen yang utuh. Cara ini membuat kamu lebih fokus pada struktur tampilan tanpa harus berpindah-pindah antar file CSS.

Jika kamu menggunakan versi terbaru seperti Tailwind CSS v4, proses instalasinya kini jauh lebih sederhana. Kamu hanya perlu melakukan import langsung di file CSS utama proyek kamu.

@import "tailwindcss";

Langkah ini sangat penting karena versi terbaru meminimalkan konfigurasi rumit di file JavaScript eksternal. Semua fitur utility-first langsung aktif dan siap kamu gunakan dalam proyek secara instan. Kamu tidak perlu lagi mengelola file konfigurasi yang panjang hanya untuk memulai styling dasar.

Mari kita coba membuat sebuah komponen kartu sederhana untuk melihat cara kerjanya secara langsung. Kamu bisa menuliskan class langsung di dalam elemen HTML atau JSX kamu tanpa membuat file CSS baru.

<div className="rounded-2xl border-2 border-gray-800 bg-white p-4 shadow-lg">
  <h3 className="text-lg font-bold text-gray-900">Judul Card</h3>
  <p className="mt-2 text-sm text-gray-600">Deskripsi singkat komponen ini.</p>
</div>

Mungkin kamu merasa class yang ditulis akan menjadi sangat panjang dan sulit dibaca jika terus bertambah. Kuncinya adalah jangan membiarkan kode tersebut berantakan dengan cara melakukan ekstraksi komponen. Jika sebuah pola class sudah kamu gunakan lebih dari tiga kali, sebaiknya pindahkan ke dalam komponen reusable.