Bye Bye CSS Ribet 👋

Jujur deh, lo pernah gak ngalamin ini pas ngoding CSS biasa?

1. Bikin HTML: <div class="sidebar-wrapper-kiri-final">
2. Buka file CSS.
3. Ngetik style panjang lebar.
4. Balik lagi ke HTML.
5. Bingung kasih nama class baru: "Aduh, ini namanya card-body atau card-content ya?" 🤯

Itu namanya Context Switching. Otak lo dipaksa loncat-loncat antar file. Itu yang bikin capek.

1. Revolusi "Sat-Set" (Utility-First) ⚡

Tailwind CSS dateng dengan ide gila: "Gak usah bikin nama class. Gak usah pindah file. Tulis aja style-nya langsung di HTML."

Coba kita adu mekanik: Bikin Tombol Biru.

Cara Lama (CSS Murni) 🐢

Lo harus ngarang nama class dulu, terus ngetik CSS-nya terpisah.

HTML:

<button class="btn-biru-mantap">Klik Saya</button>

CSS:

 
.btn-biru-mantap {
  background-color: #3b82f6;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  /* Kalau mau ganti dikit, harus edit file ini lagi */
}

Cara Tailwind (The Modern Way) 🚀:

Gak perlu ngarang nama. Langsung tempel jurusnya.

 
<button className="bg-blue-500 text-white py-2 px-5 rounded">
  Klik Saya
</button>

• bg-blue-500: Background biru level 500.

• text-white: Teks putih.

• py-2: Padding Y (Atas-Bawah) dikit.

• px-5: Padding X (Kiri-Kanan) agak lebar.

• rounded: Sudut tumpul.

Hasilnya sama, tapi waktunya beda jauh. Lo gak perlu mikir nama btn-biru-mantap.

2. Bedanya sama Bootstrap? 🤔

Banyak yang nanya: "Lah, ini mah sama aja kayak Bootstrap dong?"

BEDA BANGET, BOS!

1. Bootstrap itu kayak Mie Instan. 🍜

   • Lo dikasih komponen "Siap Saji" (btn-primary, navbar).

   • Cepet sih, tapi rasanya pasaran. Semua web Bootstrap mukanya mirip. Susah kalau mau dicustom jadi unik.

2. Tailwind itu kayak Mainan LEGO. 🧱

   • Lo dikasih kepingan kecil (Warna, Jarak, Font).

   • Lo bebas susun kepingan itu jadi apa aja. Mau bikin istana? Bisa. Mau bikin pesawat? Bisa.

   • Hasilnya? Website lo punya Identitas Unik (Gak pasaran).

3. Keuntungan Terselubung 🕵️‍♂️

Selain cepet, ada bonus lainnya:

1. File CSS Gak Membengkak: Di CSS biasa, setiap lo bikin fitur baru, lo nambahin CSS baru. File makin gede. Di Tailwind, lo cuma "Daur Ulang" class yang udah ada. Ukuran file CSS lo bakal tetep kecil walau web lo segede Tokopedia.

2. Gak Takut Hapus Kode: Pernah gak lo takut hapus CSS karena: "Jangan-jangan class ini dipake di halaman lain?" Di Tailwind, style itu nempel di elemennya. Kalau elemennya dihapus, style-nya ikut ilang. Aman sentosa.