Halo teman-teman semuanya, setelah kita berhasil menginstal dan mencoba Tailwind CSS di artikel sebelumnya, sekarang saatnya kita memahami fondasi utama dari Tailwind, yaitu pendekatan utility-first. Konsep ini adalah kunci dari cara kerja Tailwind CSS yang membedakannya dari framework lain.
Dengan pendekatan utility-first, kita tidak lagi menulis aturan CSS secara manual di file terpisah. Sebagai gantinya, kita menggunakan banyak utility class langsung di elemen HTML untuk mengatur tampilan — seperti warna, margin, padding, posisi, tipografi, dan sebagainya.
Apa Itu Utility Class?
Utility class adalah class bawaan dari Tailwind CSS yang memiliki fungsi tunggal dan spesifik. Setiap class hanya mengatur satu properti CSS tertentu. Kita bisa menggabungkan beberapa class ini untuk menghasilkan tampilan UI yang lengkap dan kompleks.
| Contoh Class |
Fungsi |
text-center |
Mengatur teks agar rata tengah |
p-4 |
Memberi padding sebesar 1rem pada semua sisi |
bg-blue-500 |
Memberi latar belakang warna biru level 500 |
rounded-lg |
Memberi sudut elemen membulat dengan ukuran besar |
shadow-md |
Memberi bayangan lembut pada elemen |
Contoh Penggunaan:
<div class="bg-blue-500 text-white p-4 rounded-lg text-center">
Halo dari Tailwind!
</div>
Struktur Umum Penulisan Class di Tailwind
Tailwind mendorong kita untuk menulis banyak class langsung dalam atribut class pada HTML. Walaupun terlihat panjang, ini justru membuat kita lebih cepat membangun UI karena tidak perlu bolak-balik membuka file CSS.
| Elemen HTML |
Class yang Digunakan |
div kontainer putih |
bg-white p-6 rounded-xl shadow-lg text-center |
| Teks tebal |
font-bold text-gray-800 |
| Teks paragraf |
text-gray-600 leading-relaxed |
Contoh:
<div class="bg-white p-6 rounded-xl shadow-lg text-center">
<h1 class="text-xl font-bold text-gray-800">Halo Dunia</h1>
<p class="text-gray-600 leading-relaxed">Contoh paragraf deskripsi</p>
</div>
Kita bisa menambahkan atau mengubah style hanya dengan memodifikasi class-class tersebut — tanpa menulis CSS di tempat lain.
Tools untuk Belajar Tailwind CSS
Untuk menjalankan dan bereksperimen dengan kode Tailwind CSS secara langsung tanpa perlu setup apapun, kita bisa menggunakan dua tools gratis berikut:
Cukup buka link di atas di browser, dan kita bisa langsung menulis HTML + Tailwind CSS secara interaktif.
Contoh Lengkap: Kartu Informasi
Agar semakin paham, mari kita buat contoh card sederhana berisi judul dan deskripsi. Kita akan menggunakan Tailwind CSS via CDN, jadi bisa langsung dicoba di browser atau salah satu playground di atas.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Kartu Informasi</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<div class="bg-white p-6 rounded-lg shadow-md max-w-md text-center">
<h1 class="text-2xl font-bold text-gray-800 mb-2">Apa Itu Tailwind CSS?</h1>
<p class="text-gray-600">
Tailwind CSS adalah *framework* modern berbasis <span class="font-semibold">utility-class</span> yang memudahkan kita membangun tampilan web dengan cepat dan fleksibel.
</p>
</div>
</body>
</html>
Di dalam contoh di atas, kita mengatur latar, padding, teks, bayangan, dan pembulatan sudut hanya dengan menuliskan class langsung di HTML — tanpa satu baris pun kode CSS manual.
Kesimpulan
Tailwind CSS menggunakan pendekatan utility-first, di mana kita menata tampilan elemen HTML menggunakan kumpulan class-class kecil yang modular dan fungsional.
Dengan menggabungkan beberapa class tersebut, kita bisa membangun UI dengan cepat, efisien, dan tetap konsisten. Kita tidak lagi perlu berpindah ke file CSS, cukup fokus di HTML.
Di artikel berikutnya, kita akan membahas lebih dalam tentang typography utilities di Tailwind — bagaimana kita bisa mengatur ukuran teks, ketebalan font, spasi baris, dan sebagainya.
Terima Kasih