Mengapa Tailwind Utility Class Lebih Baik

Untuk beberapa pengembang web mungkin sebagian masih menggunakan CSS Biasa (Separate File) karena tidak perlu repot-repot membuat css langsung di html yang membuat kode terlihat kotor dan banyak perulangan css,namun jika kita bandingkan antara penggunaan pemanggilan css biasa dengan tailwind meskipun terlihat panjang dan berulang, ini dianggap "ideal" untuk proyek modern, tetapi ada alasan teknis yang menjelaskan mengapa cara ini lebih baik daripada CSS biasa (separate CSS file).

Berikut adalah penjelasan perbandingannya:

1. Masalah Utama CSS Biasa (Separate File)

Jika kita menggunakan cara lama, kita mungkin membuat class seperti ini di file style.css:

.sidebar-link {
    padding: 12px;
    border-radius: 12px;
    color: #4b5563;
    transition: all 0.2s;
}
.sidebar-link:hover {
    background-color: #f9fafb;
    color: #111827;
}
.sidebar-link.active {
    background-color: #fdf2f8;
    color: #db2777;
    border-left: 4px solid #db2777;
}

Masalahnya:

• Naming Convention (BEBAN MENTAL): Anda harus mikir nama class yang unik (sidebar-link, menu-item, nav-btn). Kalau project besarnya, bisa jadi ribuan nama class.
• Spaghetti Code: Lama-lama file CSS Anda akan menjadi sangat besar (ribuan baris) dan sulit dicari style mana yang dipakai dan mana yang tidak ("Dead CSS").
• Inkonsistensi: Suatu saat Anda mungkin tulis padding: 12px di tempat A, dan padding: 14px di tempat B karena lupa. Di Tailwind, Anda hanya punya p-3 (12px) atau p-4 (16px), jadi desain otomatis konsisten.
  

Meskipun HTML-nya terlihat "kotor" karena panjang, Tailwind menawarkan keuntungan besar:

1. Tidak Ada Context Switching: Anda tidak perlu bolak-balik antara file HTML dan file CSS. Semua style ada di tempat (di HTML). Anda langsung edit situ juga.
2. Jaminan Konsistensi (Design Tokens): Warna pink #d63384 disimpan dalam config. Kalau besok bos mau ganti jadi biru, Anda cukup ganti di satu tempat config, dan semua class yang pakai warna itu berubah.
3. Optimasi Ukuran File (PurgeCSS): Ini yang paling penting. Yang Anda lihat di kode editor panjang, tapi yang dikirim ke browser itu KECIL.

• CSS Biasa: File CSS berisi 500 baris code dikirim ke browser meskipun user hanya membuka 1 halaman.
• Tailwind: Saat di-build (production), Tailwind akan memindai HTML Anda, lalu hanya meng-generate CSS untuk class yang Anda pakai. Jika Anda pakai 10 class, file CSS-nya hanya berisi 10 class itu saja. Hasilnya website sangat ringan dan cepat.

Kesimpulan

Metode Tailwind yang panjang di HTML itu hanya representasi visual di editor.

• Untuk prototyping cepat: Tulis panjang di HTML (Utility classes).
• Untuk codebase yang rapi (Clean Code): Gabungkan dengan Blade Component atau @apply CSS jika elemennya berulang puluhan kali.