Mencoba Tailwind CSS, Berkenalan dengan Konsep Utility First

Tiga tahun lalu, ketika dunia front-end di Indonesia heboh tentang Tailwind, saya bergeming, tetap setia dengan Bootstrap dan Sass. Dua tahun lalu, ketika WPU (Web Programming UNPAS) mengeluarkan playlist Tailwind, saya masih saja bergeming. Saat itu saya masih “berbulan madu” dengan BEM methodology dalam menulis kode CSS.

Sampai beberapa bulan lalu, saya masih menganggap bahwa Tailwind hanyalah “inline CSS” dengan wacana yang terlalu dibesar-besarkan. Tetapi pendapat saya berubah setelah mencobanya, benar-benar mencobanya.

---

Mengubah Mindset dari Component Based ke Utility Based

Di Bootstrap, untuk membuat katakanlah sebuah form, kita tak perlu susah payah. Kita hanya perlu menyalin komponen yang sudah dilengkapi dengan berbagai class Bootstrap lalu menambahkannya di project kita.

Namun, kemudahan yang ditawarkan harus dibayar mahal: kekangan. Mereka terlalu banyak ikut campur tentang bagaimana sebuah elemen atau komponen HTML harus terlihat.

Dalam artikel “Mengapa Saya Lebih Suka Vanilla CSS Daripada Bootstrap?” saya bercerita dengan gamblang tentang alasan saya tak lagi menggunakan CSS framework. Itu sebabnya pula, web yang satu lagi langitamaravati.my.id dibangun dengan vanilla CSS alias tanpa framework.

Tailwind sebaliknya. Tailwind hanya menyediakan utility class siap pakai yang bisa kita gunakan sesuka hati. Mau membuat primary button dengan warna merah? Go a head. Mau membuat elemen input dengan warna ring pink ketika input focus? Bisa.

Maka Tailwind menjawab itu, memecahkan masalah yang selama ini saya hadapi ketika menulis CSS. Memberikan kemudahan sekaligus kebebasan.

Pada mulanya paradigma, utility first memang sulit diterima. Terutama oleh para front-end developer sok idealis seperti saya. Tetapi jika kita kembali pada prinsip “berpikir sederhana” dan “tak ada teknologi paling sempurna di dunia”, saya kira kita akan baik-baik saja.

“Lalu bagaimana dengan BEM methodology dan semantic class?”

Ya memang kenapa?

---

Pros: Kelebihan Tailwind CSS

Setelah menggunakan Tailwind lebih dari 6 bulan dan membuat beberapa project (termasuk web ini), dibandingkan dengan vanilla CSS dan CSS framework sejuta umat a.k.a Bootstrap, inilah kelebihan Tailwind yang saya rasakan.

1. Bebas lepas

   Jika Anda sudah kenyang menggunakan framework CSS component-based, Anda pasti tahu bagaimana rasanya ketika menggunakan Tailwind. Bebas, bukan? Kita bisa ngoding barbar, saudara-saudara!

2. Selamat tinggal un-used CSS

   Oke, begini, jika kita memasukkan sebuah CSS framework ke dalam project kita, maka semua kode CSS yang ada di framework tersebut akan dirender. Tak peduli apakah kita menggunakan class-nya atau tidak.

   Tailwind, di sisi lain, hanya memasukkan CSS yang benar-benar kita gunakan. Jadi, kita bisa mengucapkan selamat tinggal pada un-used CSS. Ini juga berarti loading speed web menjadi lebih cepat .

3. Ah, persetan dengan classname

   Jujur saja, meskipun sudah terbiasa dengan metodologi BEM dalam menamai class, memberikan nama class untuk elemen HTML tetap merupakan kegiatan yang melelahkan.

   Dengan Tailwind, beban pikiran dalam memikirkan classname bisa berkurang. Saya bisa fokus ke hal lain ketika mengembangkan web.

4. Cukup mudah digunakan

   Ternyata, Tailwind cukup mudah digunakan, tidak seribet yang saya bayangkan sebelumnya. Dengan dokumentasi yang lengkap dan utilitas yang jelas, proses pengembangan menjadi lebih cepat dan efisien. Ditambah lagi dukungan komunitas, banyaknya pengguna, dan tutorial yang tersebar di belantara internet.

5. Duet maut dengan React dan Laravel

   Jika Anda menggunakan Tailwind CSS ketika slicing HTML biasa, mungkin akan terasa melelahkan karena harus styling semua elemen satu per satu, halaman per halaman. Namun, akan terasa sangat berbeda bila kita menggunakan teknologi yang memungkinkan layouting atau templating, termasuk ketika menggunakan bahasa dengan konsep MVC, PHP dan Laravel misalnya.

   React sendiri tidak secara khusus mengusung konsep MVC, tetapi karena namanya juga UI component, keberadaan Tailwind dan utility based-nya sangat membantu.

6. Tersedia komponen siap pakai, tetapi …

   Karena eksosistemnya berkembang sedemikian pesat, banyak sekali pihak ketiga yang menyediakan komponen-komponen Tailwind siap pakai. Bahkan Tailwind sendiri memiliki TailwindUI. Hal ini bisa menjadi sebuah benefit dan kemudahan bagi beberapa developer. Meski terus terang, tidak disarankan jika kita baru saja belajar.

7. Grid system

   Poin ini juga menjadi salah satu favorit saya: grid system Tailwind luar biasa membantu untuk layouting. Selain itu, karena konsep utility-class, kita bebas mengatur layout sesuai dengan tampilan yang diinginkan. Bahkan antara satu elemen dengan elemen lainnya tak harus sama. Katakanlah, elemen pertama jadi 12 kolom, elemen kedua jadi 6 kolom.

   Bayangkan kalau harus layouting menggunakan CSS konvensional dengan lebar kolom berbeda-beda. Ngesang weh nu aya. 😂

8. Responsif

   Di mobile besar huruf 18px, di tablet besar huruf 1.5rem, di laptop besar huruf 2.5rem. Semua itu bisa ditulis dalam satu elemen, tak harus setup media query dan lain-lain. Inilah keajaiban CSS framework yang responsif. Begitu juga dengan layout dan pengaturan tampilan lainnya, bisa ditulis dalam satu elemen.

9. State, pseudo-elements, pseudo-classes

   Menulis state seperti hover dan active dalam satu elemen? Oh, yes! Kita juga bisa menulis pseudo-elements dalam satu elemen. Termasuk before dan after.

   <!-- Pseudo-classess -->
   <a href="/artikel-lain" class="text-red-700 hover:text-slate-900">
     Anchor text menuju artikel lain</a
   >
   
   <!-- Pseudo-elements -->
   <ul class="flex first:text-red-700">
     <li>Item 1</li>
     <li>Item 1</li>
     <li>Item 1</li>
   </ul>
   

---

Cons: Kekurangan Tailwind CSS

Ada kelebihan, tentu ada kekurangan. Sebab tak ada satu pun teknologi yang sempurna.

1. Konsistensi

   Kekurangan pertama dan paling utama yang saya rasakan ketika menggunakan Tailwind adalah konsistensi. Misalnya, saya membuat komponen A dengan padding 10px. Di halaman lain, saya membuat komponen B dengan styling yang sama tapi saya lupa harus diberi padding berapa. Begitu juga dengan komponen dan elemen lainnya.

   “Kan, tinggal copas aja, Teh”

   Ya bukan di itu letak masalahnya.

   Dalam prinsip desain, termasuk web design, konsistensi akan membangun unity. Belum lagi jika front-end ditangani oleh lebih dari satu orang developer.

2. Re-usability

   Salah satu prinsip CSS adalah DRY (Do Not Repeat Yourself). Saat menulis kode CSS konvensional, kita akan menulis satu class untuk digunakan di berbagai elemen. Misalnya:

   .button {
     display: inline-block;
     padding: 10px 20px;
     border-radius: 4px;
     border: 1px solid #111;
     text-decoration: none;
     text-align: center;
   
     &--solid {
       background-color: #111;
       color: #fff;
     }
   
     &--outline {
       background-color: #fff;
       color: #111;
     }
   }
   

   Di HTML, kita bisa menggunakan classes tersebut ke beberapa elemen sekaligus. Contoh:

   <!-- Button solid -->
   <input type="submit" value="Submit" class="button button--solid" />
   
   <a role="button" class="button button--solid">Find More</a>
   
   <!-- Button outline -->
   <button type="button" class="button button--outline">About</button>
   
   <a role="button" class="button button--outline">Readmore</a>
   

   Dengan begini, semua elemen akan memiliki style yang sama, konsisten, dan —sekali lagi— class yang sama dapat digunakan di berbagai elemen sehingga kita tidak perlu mengulang.

   Sebaliknya, di Tailwind kita harus menulis seperti ini:

   <input
     type="submit"
     value="submit"
     class="inline-block rounded-lg border border-slate-900 bg-slate-900 px-6 py-2 text-center text-white no-underline"
   />
   
   <!-- Ulang style yang sama di elemen berikutnya -->
   <a
     role="button"
     class="inline-block rounded-lg border border-slate-900 bg-slate-900 px-6 py-2 text-center text-white no-underline"
     >Readmore</a
   >
   

   Tentu saja tidak ada larangan jika kita ingin menggunakan pendekatan CSS konvensional dengan memberikan class pada elemen HTML kemudian menggunakan @apply saat styling. Tetapi kalau begitu, ngapain pakai Tailwind?

3. Elemen HTML yang bala

   Saya suka menulis kode HTML yang rapi, terstruktur, dan pendek. Ini agar kode saya mudah dibaca dan dikelola. Ketika mencoba Tailwind, saya benar-benar syok. 🤣

   Semua class ditulis di dalam HTML, ya Tuhaaannn …!

   <h2 className='font-display font-semibold text-slate-800 transition
   duration-300 hover:underline hover:text-slate-950'>
   

4. Scalability

   Ketika sebuah project dikembangkan menjadi lebih besar, itu artinya kita harus menulis ulang CSS di buanyak sekali elemen. Tidak terbayang kerepotan macam apa yang akan dihadapi.

5. Agak sulit untuk styling general

   Maksud saya begini, jika digunakan untuk membuat blog, tentu ada artikel. Nah, styling artikelnya ini yang agak susah karena kita tidak mungkin memberi styling satu per satu, bukan? Tailwind punya plugin Typography untuk meng-handle ini. Sayangnya, override style bawaan plugin jauh lebih ribet daripada ngoding sendiri.

   Mau tidak mau, untuk artikel saya menggunakan CSS konvensional. Saya belum menemukan solusi yang tepat untuk ini.

---

Kesimpulan

Kesimpulannya, meski Tailwind tidak sempurna, Tailwind berhasil memecahkan masalah-masalah yang selama ini saya hadapi ketika menulis kode CSS. Memang, perlu mengubah mindset dan beberapa kebiasaan.

Terlepas dari segala kekurangannya, bisa dikatakan saya akan lebih sering menggunakan Tailwind untuk projects berikutnya. (eL)