Yang Tidak Tertulis dari Penggunaan Tailwind
Kalau kamu memperhatikan perkembangan dunia front-end web belakangan ini, nama Tailwind pasti tidak asing lagi. Tailwind adalah sebuah framework CSS yang memberikan sekumpulan peraturan siap pakai, dalam bentuk class yang bisa langsung diaplikasikan di sebuah elemen HTML. Framework ini berhasil mencapai traction tinggi di kalangan pengembang web berkat kemudahan dan keringkasan penggunaannya.
Namun, meski demikian, setelah mencoba menggunakannya untuk membuat sebuah landing page, saya merasa bahwa ini bukan untuk saya. Ada beberapa hal yang membuat saya merasa tidak klik dengan framework ini, termasuk di dalamnya, keharusan saya bolak-balik membaca dokumentasinya untuk menemukan nama class yang sesuai dengan properti CSS yang saya inginkan. Dan menumpuk elemen HTML dengan kombinasi berbagai class juga membuat proses maintenance code jadi tidak se-intuitif yang saya harapkan. Dan sentimen ini ternyata juga dimunculkan di beberapa artikel yang lucunya lahir tidak jauh dari ketika saya men-twit opini saya. Contoh di artikel ini dan ini.
Yang tidak kalah menarik, justru dari beberapa twit yang berseliweran soal pros & cons menggunakan Tailwind, saya dan beberapa teman pun akhirnya sepakat untuk berdiskusi di publik, menggunakan medium Twitter Space. Turut hadir di sana, mas @pveyes, @F2aldi, @dimassrio, @iSatrio, @rubiagatra, @arieare. Semua turut hadir membawa opini masing-masing soal Tailwind, dibungkus dalam suasana diskusi santai dan penuh tambahan wawasan.
Dari acara dadakan tersebut, ada beberapa poin soal penggunaan Tailwind yang rasanya perlu jadi perhatian untuk mereka yang baru mau menggunakan Tailwind ataupun yang tidak setuju, tapi masih terbuka untuk memberikan kesempatan kedua bagi framework ini.
1. Tailwind adalah peraturan atau konvensi bersama
Seperti tertulis di atas, dan sudah saya duga sebelumnya, Tailwind memberikan berbagai utility yang bisa menjadi bahan kesepakatan bersama soal bagaimana tampilan sebuah produk harus ditetapkan. Dan ini dilakukan di level yang cukup rendah. Sehingga diskusi pemilihan orange-button atau cta-button tidak terjadi karena properti visual sebuah button justru tersusun dari mengkombinasikan berbagai class seperti rounded-lg bg-yellow-500 text-yellow-900 . Konvensi bersama ini akan sangat membantu para developer dan desainer untuk bekerja di atas fondasi yang sama tanpa perlu takut saling menimpa properti CSS atau membuat desain yang tidak standar. Bisa dibilang ini Design System tanpa perlu kerepotan membuat 1 Design System.
2. Tailwind bisa bersinar saat front-end yang dibuat memang tersusun dari komponen-komponen independen
Saya musti mengakui kalau project pertama saya dengan Tailwind mungkin bukan use case yang cocok. 1 halaman landing page, murni dengan HTML saja, tanpa komponen (iya, saya memang semalas itu). Akhirnya ketika harus mengubah tampilan beberapa elemen, saya jadi harus menelusuri kodenya satu-persatu. Hal yang biasanya, mudah dilakukan hanya dengan mengganti properti sebuah class di CSS, kini jadi makan waktu. Namun, andai saya menyusunnya dengan komponen, saya cukup mengubah 1 komponen saja dan perubahan terjadi di semua tempat. Lagi-lagi, ini masalah mindset yang tidak sesuai.
3. Twin Macro bisa jadi alat bantu untuk meng-customize Tailwind
Ini adalah sebuah tips menarik dari Faldi. Kalau kita butuh melakukan kustomisasi di luar standar yang disediakan Tailwind, maka kita bisa menggunakan Twin Macro untuk menambahkan beberapa properti CSS tambahan. Saya belum sempat menggunakan library ini, tapi nampak menarik bagi yang ingin menggunakan Tailwind tapi juga tidak ingin kehilangan kemampuan bereksperimen.
4. Tailwind membantu dalam membuat produk, tapi pengetahuan fundamental CSS tetap dibutuhkan
Hal terakhir yang juga muncul saat diskusi kemarin adalah fakta bahwa ya, Tailwind memang membantu dalam mempercepat pembuatan sebuah produk (website, web app), tapi tetap pengetahuan dasar CSS harus dimiliki, terutama apabila ingin memaksimalkan penggunaan CSS. Seperti halnya Bootstrap, bisa Tailwind tidak berarti bisa CSS. Tailwind membantu mengurangi friksi saat merasa CSS terlalu gaib, tapi teknologi akan berkembang begitu cepat, tanpa pengetahuan fundamental CSS, mungkin kita akan terus bergulat dengan “bagaimana menampilkan sebuah elemen tepat di tengah layar?”
Dengan demikian, berdasarkan diskusi tadi, saya merasa bahwa penggunaan Tailwind ini memang butuh use case yang tepat untuk merasakan penuh value-nya. Anggaplah Tailwind sebagai wasit yang memberikan standar permainan, sehingga semua yang ikut bermain bisa punya ruang gerak yang sama. Saat bermain bola dengan teman-teman, di jalanan, dalam jumlah sedikit, mungkin kita tidak perlu wasit, dan keberadaannya pun bisa dianggap redundant karena semua orang tahu apa yang boleh/tidak boleh dilakukan. Sebaliknya, saat sebuah pertandingan bola di liga profesional, dengan hasil yang punya implikasi tidak main-main, absennya wasit justru akan berdampak pada kekacauan masif.
Saya mungkin akan memberikan kesempatan lagi pada Tailwind, dengan konteks pekerjaan yang sesuai. Bagaimana dengan kamu?
