Tailwind CSS kini menjadi salah satu framework CSS paling populer di kalangan web developer modern. Filosofi utility-first yang diusungnya membuat proses desain antarmuka menjadi cepat, efisien, dan fleksibel. Jika kamu baru mengenal Tailwind, hal pertama yang perlu kamu pahami adalah struktur dasar kelas di Tailwind CSS (class structure) yang digunakan framework ini.
Artikel ini akan membahas secara lengkap bagaimana cara kerja kelas di Tailwind, konsep dasarnya, serta contoh penggunaan untuk berbagai elemen seperti flex, grid, text, dan background (bg) agar kamu bisa mulai membangun tampilan profesional dengan mudah.
Apa Itu Tailwind CSS dan Mengapa Berbeda?
Tailwind CSS adalah framework CSS berbasis utility-first, yang berarti alih-alih membuat komponen CSS kustom untuk setiap elemen, kamu menggunakan kelas kecil (utility classes) untuk langsung menentukan gaya (style) di HTML.
Contohnya, di CSS tradisional kamu mungkin menulis seperti ini:
.btn {
background-color: #3b82f6;
color: white;
padding: 10px 20px;
border-radius: 8px;
}
Dan di HTML:
<button class="btn">Klik Saya</button>
Sedangkan di Tailwind, cukup satu baris HTML seperti ini:
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg">Klik Saya</button>
Hasilnya sama — tetapi lebih cepat, konsisten, dan tanpa perlu file CSS tambahan.
Struktur Umum Kelas di Tailwind
Kelas di Tailwind memiliki pola penamaan yang konsisten dan mudah dipahami:
[property]-[value]
Contohnya:
-
text-lg→ ukuran teks besar (large text size) -
bg-red-500→ latar belakang merah dengan intensitas 500 -
p-4→ padding di semua sisi sebesar 1rem (16px) -
flex→ menerapkan display fleksibel (display: flex)
Dengan pola ini, kamu bisa langsung memahami arti setiap kelas tanpa membuka dokumentasi berkali-kali.
1. Kelas Layout: Flexbox dan Grid
a. Flexbox
Tailwind memudahkan pengaturan layout menggunakan flexbox hanya dengan beberapa kelas.
Contoh dasar:
<div class="flex justify-between items-center"> <div class="bg-blue-500 text-white p-4">Kiri</div> <div class="bg-green-500 text-white p-4">Kanan</div> </div>
Penjelasan:
-
flex→ mengaktifkan flexbox -
justify-between→ mengatur jarak antar elemen menjadi rata kanan-kiri -
items-center→ mensejajarkan elemen secara vertikal di tengah
Hasilnya, dua kotak akan sejajar horizontal dengan jarak yang proporsional.
b. Grid
Tailwind juga memiliki dukungan penuh untuk CSS Grid.
Contoh:
<div class="grid grid-cols-3 gap-4"> <div class="bg-pink-400 p-4 text-center">1</div> <div class="bg-pink-500 p-4 text-center">2</div> <div class="bg-pink-600 p-4 text-center">3</div> </div>
Penjelasan:
-
grid→ mengaktifkan sistem grid -
grid-cols-3→ membuat 3 kolom -
gap-4→ memberi jarak antar kolom sebesar 1rem
2. Kelas Teks (Text Utilities)
Kelas text-* di Tailwind sangat fleksibel untuk mengatur tampilan teks. Berikut beberapa contoh umum:
| Kelas | Fungsi |
|---|---|
text-sm, text-lg, text-2xl |
Mengatur ukuran font |
text-center, text-left, text-right |
Mengatur perataan teks |
font-bold, font-semibold, font-light |
Mengatur ketebalan huruf |
text-gray-700, text-blue-600 |
Mengubah warna teks |
Contoh:
<p class="text-2xl font-semibold text-blue-600 text-center"> Selamat Datang di Tailwind CSS! </p>
Hasilnya adalah teks besar, tebal sedang, berwarna biru, dan rata tengah.
3. Kelas Background (bg-*)
Tailwind memiliki sistem warna yang sangat lengkap dengan berbagai tingkat kecerahan.
Format warnanya:
bg-[warna]-[tingkatan]
Contoh:
<div class="bg-indigo-500 text-white p-6 rounded-lg"> Ini contoh background indigo tingkat 500. </div>
Beberapa contoh warna populer:
-
bg-blue-500 -
bg-green-400 -
bg-red-600 -
bg-gray-200
Kamu juga bisa mengatur efek gradien:
<div class="bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 p-6 text-white"> Background gradien horizontal </div>
4. Spacing (Margin dan Padding)
Tailwind menggunakan singkatan untuk margin (m) dan padding (p) dengan nilai berbasis skala.
| Kelas | Fungsi |
|---|---|
m-4 |
Margin di semua sisi |
mt-2, mb-6, ml-3, mr-1 |
Margin atas, bawah, kiri, kanan |
p-4 |
Padding di semua sisi |
px-6, py-3 |
Padding horizontal dan vertikal |
Contoh:
<div class="p-4 m-2 bg-gray-100 rounded-lg"> Elemen dengan padding dan margin </div>
5. Border dan Rounded
Membuat elemen dengan batas dan sudut melengkung kini super mudah.
<div class="border border-gray-400 rounded-lg p-4"> Kotak dengan border abu dan sudut membulat </div>
Kelas penting:
-
border→ aktifkan border -
border-[warna]-[tingkatan]→ ubah warna border -
rounded,rounded-lg,rounded-full→ ubah bentuk sudut
6. Responsivitas (Mobile First)
Tailwind bersifat mobile-first, artinya gaya dasar berlaku untuk layar kecil, lalu bisa ditimpa untuk layar besar.
Contoh:
<div class="text-sm md:text-lg lg:text-xl"> Teks ini berubah ukuran sesuai lebar layar. </div>
Penjelasan:
-
text-sm→ default (mobile) -
md:text-lg→ ukuran menengah (tablet) -
lg:text-xl→ layar besar (desktop)
7. Mode Gelap (Dark Mode)
Tailwind mendukung dark mode hanya dengan menambahkan prefiks dark:.
Contoh:
<div class="bg-white text-black dark:bg-gray-900 dark:text-white p-4"> Mode terang & gelap otomatis </div>
Ketika sistem pengguna diatur ke dark mode, gaya akan otomatis berubah.
Kesimpulan
Tailwind CSS memberikan cara baru dalam mendesain antarmuka yang cepat, efisien, dan fleksibel.
Dengan memahami struktur dasar kelas seperti flex, grid, text-*, bg-*, serta sistem responsifnya, kamu dapat membangun tampilan profesional hanya dengan HTML tanpa perlu menulis CSS panjang.
Bagi pemula, Tailwind mungkin terlihat rumit karena banyak kelas, namun setelah terbiasa, kamu akan menyadari bahwa sistem utility-first ini justru mempercepat pengembangan dan meminimalkan bug CSS yang sulit dilacak.