By hanifabdusy 
Awal belajar web development, aku selalu menggunakan CSS native. Semua styling kutulis manual: mulai dari membuat class sendiri, mengatur warna, padding, margin, hingga merapikan struktur file CSS supaya tidak berantakan. Rasanya menyenangkan di awal, tapi lama-lama ada tantangan yang bikin pusing—terutama ketika project mulai membesar.
Masalah yang paling sering aku alami adalah:
- Class CSS menumpuk banyak dan susah dipelihara
- Style duplikat di berbagai tempat
- Ingin ubah satu warna, tapi efeknya kemana-mana
- Proses mencoba style baru cukup lama karena harus bolak-balik file CSS
Sampai akhirnya aku mencoba Tailwind CSS. Dan jujur… pengalaman coding-ku berubah total.
Pada tahun 2025, Tailwind merilis Tailwind CSS 4.0, versi yang lebih cepat, lebih ringan, dan jauh lebih praktis dibanding sebelumnya. Di titik itu aku benar-benar merasa seperti “kenapa nggak dari dulu pakai ini?”.
Apa Itu Tailwind CSS Menurut Pengalaman Pribadi?
Tailwind CSS adalah framework utility-first, yang artinya kita cukup pakai class kecil-kecil yang sudah disediakan tanpa nulis CSS manual.
Kalau dulu aku nulis:
.title {
font-size: 22px;
font-weight: bold;
color: #2563eb;
}Dengan Tailwind cukup:
<h1 class="text-xl font-bold text-blue-600">Awalnya memang terlihat aneh karena HTML jadi penuh class. Tapi setelah dipakai beberapa hari, ternyata justru:
- lebih cepat,
- tidak perlu berpindah file,
- lebih konsisten,
- dan lebih mudah maintain.
Kenapa Aku Jatuh Cinta dengan Tailwind CSS 4.0
Tailwind 4.0 membawa upgrade besar, dan aku benar-benar merasakannya di workflow sehari-hari.
1. Zero Config
Sumpah ini enak banget. Dulu Tailwind perlu file config. Sekarang? Bisa langsung pakai tanpa konfigurasi apa pun.
2. Compiler Baru 60% Lebih Cepat
Ngebuild project berasa ringan banget. Cocok buat yang laptop-nya suka kepanasan.
3. CSS Variable Native
Sebagai orang yang suka custom warna, fitur ini bikin hidup lebih mudah.
4. Sistem Warna Baru
Warna-warna bawaannya jadi lebih modern dan enak untuk UI kekinian.
5. Dark Mode Lebih Mudah
Nggak perlu ribet lagi, tinggal pakai class dark: dan selesai.
Cara Aku Install Tailwind CSS
1. Cara Cepat (CDN)
Dulu saat pertama belajar, aku pakai cara ini:
<script src="https://cdn.tailwindcss.com"></script>
Tailwind langsung aktif. Cocok buat belajar atau project kecil.
2. Instalasi Tailwind di React / Vite
Saat project makin besar, aku pakai setup lengkap:
npm install tailwindcss postcss autoprefixer
npx tailwindcss initLalu tambahkan:
@tailwind base;
@tailwind components;
@tailwind utilities;Setelah ini Tailwind berjalan lancar di JSX.
Hal yang Paling Berasa Setelah Pindah ke Tailwind
1. Styling Jadi Kilat
Kalau dulu nunggu lama untuk test warna, font, margin—sekarang tinggal ganti class aja.
2. Design Auto Konsisten
Spacing, warna, ukuran font seragam di seluruh halaman.
3. Tidak Ada File CSS yang Berantakan
Karena hampir jarang buka file CSS lagi.
4. UI Lebih Cepat Jadi
Bahkan sebagai mahasiswa yang sibuk dengan kuliah + proyek, aku bisa bangun layout UI berkali-kali lebih cepat.
Contoh Komponen Tailwind yang Sering Aku Pakai
Navbar
<nav class="p-4 bg-white shadow flex justify-between items-center">
<h1 class="text-xl font-bold">My Website</h1>
<ul class="flex gap-4">
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>Card
<div class="max-w-sm bg-white shadow rounded-xl p-4">
<h2 class="text-2xl font-bold">Judul Card</h2>
<p class="text-gray-600 mt-2">Ini adalah contoh card yang aku buat pakai Tailwind.</p>
</div>Button
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
Tombol Tailwind
</button>Dark Mode yang Mudah
Dark mode salah satu fitur favoritku.
<div class="bg-white dark:bg-gray-900 text-black dark:text-white p-4">
Mode Gelap Tailwind!
</div>Tinggal tambahkan class:
<html class="dark">Kesimpulan Pengalaman Pribadi
Berpindah dari CSS native ke Tailwind CSS adalah salah satu keputusan terbaik dalam perjalanan belajarku sebagai web developer.
Dengan Tailwind:
- Proses styling jadi lebih cepat
- Tidak perlu bolak-balik file CSS
- Tampilan lebih konsisten
- Project lebih mudah dirawat
- UI terasa lebih modern dan rapi
Tailwind CSS 4.0 benar-benar mempercepat workflow-ku, terutama saat membangun project React dan Vite.
Kalau kamu masih pakai CSS native, saran jujur dariku:
cobain Tailwind minimal 2 hari, dan kamu bakal tahu bedanya.