Sejarah perkembangan desain web adalah kisah epik tentang bagaimana komunitas developer terus berusaha menjinakkan *layout* yang liar. Dari era tabel HTML murni, *float hacks*, BEM, hingga kini kita berdiri di puncak peradaban desain web melalui kerangka kerja utilitas pertama seperti Tailwind CSS.
Meninggalkan CSS Semantik Tradisional
Selama bertahun-tahun, kita diajarkan tentang pentingnya "Pemisahan Kekhawatiran" (Separation of Concerns). Kita dilatih untuk memisahkan struktur HTML dan gaya visual CSS ke dalam dua file yang berbeda. Pendekatan semantik ini memaksa kita untuk menciptakan ribuan nama *class* unik seperti .card-container, .btn-primary-large, atau .sidebar-wrapper. Meskipun terdengar rapi di atas kertas, seiring bertambah besarnya skala proyek, ukuran file CSS akan membengkak secara eksponensial. Mengganti satu warna tombol berisiko menghancurkan tata letak di halaman lain karena kode CSS yang tumpang tindih.
Tailwind CSS hadir bak pahlawan yang memberontak terhadap dogma lama tersebut. Alih-alih menulis CSS khusus, Tailwind menyediakan blok-blok utilitas atomik (utility-first) berskala mikro, seperti flex, pt-4, text-center, dan rotate-90. Anda merakit desain Anda langsung di dalam atribut class HTML. Pada awalnya, pendekatan ini akan membuat tag HTML Anda terlihat berantakan ("ugly HTML"), tetapi begitu Anda terbiasa, kecepatan iterasi desain Anda akan meningkat hingga lima kali lipat.
"Ragu mencoba Tailwind adalah hal yang wajar. Namun saya belum pernah menemui satu pun developer yang telah sungguh-sungguh membangun aplikasi menggunakan Tailwind, lalu memutuskan ingin kembali menulis CSS mentah."
Frontend Architect
Modern CSS Symposium
Performa Optimal (Zero CSS Bloat)
Keunggulan absolut dari Tailwind bukan sekadar soal kemudahan penulisan, melainkan performa *build* akhirnya. Melalui kompilator *Just-in-Time* (JIT), Tailwind secara cerdas akan memindai seluruh file template HTML dan JavaScript Anda, lalu hanya meng-ekstrak *class-class* yang benar-benar Anda gunakan. Hasilnya? File CSS produksi Anda jarang sekali menyentuh ukuran lebih dari 10KB (dikompresi dengan Gzip/Brotli).
Duplikasi Kode? Gunakan Komponen: Salah satu kritik terbesar terhadap Tailwind adalah *copy-paste* berulang. Solusinya sederhana: jangan salin kode Tailwind-nya, ekstrak tag HTML tersebut menjadi komponen *reusable* (seperti komponen di React/Vue) dan panggil komponen tersebut berulang-ulang!
Komentar
Posting Komentar