Tailwind Adalah Bahasa Desain

Beberapa hari ini lumayan rame lagi yang bahas Tailwind.

Sebenernya beberapa orang mungkin berpikir, “udahlah gak usah dibahas, kalau lu suka pake aja, kalau gak suka gak usah pake.”

Orang ngomong kayak gitu karena mereka menganggap perdebatan soal Tailwind ini sekadar drama aja.

Tapi menurut saya, perdebatan kekurangan dan kelebihan stack tertentu itu hal yang gak bisa dihindari di dunia software engineering dan kalau kita bijak justru bisa membuat kita jadi lebih baik.

Gini loh, saya sendiri telah melewati beberapa fase terkait cara pandang saya terhadap perdebatan stack teknologi ini.

Fase fanatis ⇒ ini ketika seseorang menyampaikan poin-poin dari teknologi yang dia suka dan kalau bisa ingin membuat siapa aja pindah ke stack yg dia sukai.

Fase tobat ⇒ di fase ini saya malas ngurusin kalau ada yang membahas pro dan kons dari sebuah teknologi. Saya berpikirnya seperti tadi, kalau lu suka tinggal pake, kalau gak suka gak usah pake. Beres.

Fase tercerahkan ⇒ di fase ini saya menyadari lagi bahwa inti dari diskusi pro kontra teknologi adalah supaya kita bisa menjelaskan ke tim dan atau klien kenapa kita memilih stack A bukan B.

Fase wisdom ⇒ di fase ini saya sadar bahwa mengetahui kekurangan dan kelebihan dari banyak stack teknologi adalah penting untuk bisa menyelesaikan permasalahan klien atau project kita dengan lebih efektif dan efisien.

Memang ada debat yang gak bermanfaat, dan ini memang harus kita hindari karena buang-buang waktu.

Artikel ini bukan berniat untuk menimbulkan pro-kontra atau perdebatan yang lebih jauh lagi terkait Tailwind.

Tetapi lebih untuk membuka wawasan, kenapa ada orang yang suka Tailwind (dalam hal ini saya, dan saya yakin banyak juga dari yang baca yang suka juga)

Dan juga ngasih tahu, beberapa hal umum yang menjadi penyebab orang malas mencoba Tailwind atau malas pake Tailwind.

Tapi bang, “Klien gak peduli kok kamu pake apa.” Kata siapa?

Iya memang ada klien yang gak ngerti teknis dan gak peduli mau pake apa.

Cuma kalian mungkin belum pernah bekerja di tempat yang restrictive, sampai database, bahasa pemrograman, web server semua udah ditentuin.

Atau mungkin kalian belum pernah ngerasain datang ke klien dan dianggap sebagai juru selamat dari projek mereka yang mau karam.

Kalau kamu gak ngerti kekurangan dan kelebihan sebuah library atau framework, kamu mau ngomong apa ke mereka?

Gimana caranya kamu bisa menganalisa kesalahan-kesalahan apa saja yang bikin projek gak berjalan sebagaimana mestinya.

Lalu gimana caranya kamu bisa membuat solusi atas permasalahan-permasalahan tersebut?

Trus gimana kamu mau meyakinkan mereka untuk ganti stack?

Sekarang kamu sudah ngerti kenapa debat teknologi tetap diperlukan? Untuk mencapai level wisdom. Sekarang mari kita lihat Tailwind.

Inti dari Tailwind

Kita akan mulai dulu, pendapat saya terkait Tailwind secara singkat adalah seperti yang pernah saya cuitkan di twitter.

Kenapa saya bilang gitu?

Karena saya yakin banget, kalian gak perlu ngerti CSS yang advanced-advanced untuk bisa bikin desain web pake Tailwind.

Bahkan saya berani bilang, kalau ada orang yang gak ngerti CSS pun asal dikasih tau aja cara pake class di HTML, dia akan bisa bikin tampilan web yg bagus dengan Tailwind.

Terutama kalau orang itu ngerti konsep desain yang umum seperti margin, padding, background, border, rounded corner, flex layout.

Tapi bang, “lu kan selalu bilang kalau fundamental itu penting, berarti fundamental CSS itu penting donk?”

Iya bener banget, tapi khusus CSS dan Tailwind ini saya kasih pengecualian.

Meskipun tentu orang yg paham fundamental CSS secara mendalam akan lebih bagus di kasus-kasus tertentu.

Tapi, kalau kalian pernah denger ada prinsip namanya pareto optimum atau prinsip pareto atau prinsip 20/80

Yang intinya, biasanya 80% hasil disebabkan oleh 20% effort. Itu terjadi di banyak hal.

Dan di kasus web desain ini juga begitu, kalian cukup effort 20% aja yaitu ngerti Tailwind, kalian akan bisa bikin 80% desain web yang sering kamu jumpai.

Kalian bisa langsung slicing dari Figma ke desain web tanpa harus ngerti seluk beluk CSS yg mendalam.

Oke apa sih yang bikin beda antara Tailwind dengan framework yang lain atau dengan pake CSS native?

Tailwind ini perintis konsep utility classes.

Utility itu maksudnya gimana? Utility secara bahasa artinya itu kegunaan atau fungsi. Setiap benda pasti punya fungsi kan, payung fungsinya biar kita gak kehujanan, jaket biar kita gak kedinginan, buat gaya juga bisa.

Dalam desain juga begitu, misalnya margin fungsinya untuk ngasih jarak antar elemen.

Border sesuai namanya untuk ngasih border. Dan seterusnya.

Seperti itulah di Tailwind, si pembuat Tailwind yaitu Adam Wathan, mengekstrak fungsi-fungsi yang biasa dipakai dalam desain ke dalam class CSS.

Makanya disebut utility class.

Misalnya margin, itu disediain class khusus margin yang berawalan dengan huruf “m”.

m-0 untuk gak pake margin, m-1, m-2, m-3 dan seterusnya semakin besar angkanya semakin besar pula marginnya.

Ini yang disebut margin utility.

Jadi kita gak perlu nulis aturan CSS margin: 0px di banyak tempat dan berulang.

Ini sesuai banget dengan prinsip software engineering yaitu DRY. “do not repeat yourself!”

Karena fungsi-fungsi tadi seperti margin kan pasti akan kita sering pake di banyak elemen.

Ngapain kita nulis aturan CSS margin berulangkali di banyak deklarasi css class.

Emang sengaruh itu ya konsep utility class ini?

Ooo jelas, kita bandingkan aja dengan kalau kita pakai native CSS.

Gak pake tailwind kebanyakan mikir dan debat daripada beneran bikin progress.

Kalau kamu udah berpengalaman, pasti ngerti pusing nya ngurusin step 1 dan 2, yaitu ngasih nama class yang pas untuk parent dan children.

Seperti kata temen saya, Adysurya Agus yang mengutip pernyataan Phil Karlton.

Ada dua hal yang paling susah dalam dunia computer science.

• Cache Invalidation
• Naming Things ( ngasih nama sesuatu baik variabel, class, method dll)

“There are only two hard things in Computer Science: cache invalidation and naming things.” ~ Phil Karlton

Di ranah CSS sampai-sampai ada standard / aturan namanya BEM (Block, Element, Modifier).

Kalau pake CSS native, kamu harus belajar itu, dan kamu masih tetep harus mikir nama class yang cocok!

Good luck with that!

Pake Tailwind, kita gak perlu pusing mikirin nama class elemen gak perlu pusing BEM.

Itu baru satu aspek aja.

“Tapi kalau pake utility class, class di kode HTML nya jadi panjang bang, susah bacanya.”

Alasan kodenya jadi panjang ini memang valid!

Tapi jadi susah bacanya? Kata siapa? Dan kata siapa kalau pake class CSS native gak susah bacanya?

Sekarang saya tanya, tujuan kalian baca itu apa? Supaya paham atau ngerti, paham apa yang dibaca. Bukan soal pendek atau panjangnya.

Panjang kalau tetep bikin kita paham gak masalah!

Pendek tapi malah gak ngerti isinya malah masalah.

Elemen yang pake class Tailwind bisa dibaca dengan mudah meskipun panjang, kamu langsung ngerti ooh si elemen ini punya position relative, display flex, flex direction nya col reverse, warna background nya slate-50, rounded cornernya lg, dst dst.

Sementara kalau pake CSS native, yes class nya pendek!

Kita langsung tahu oh ini class card tapi apa kita langsung paham ini card style nya apa ya? ENGGAK kan?

Kita masih harus buka file CSS terkait.

Lihat definisi class card, cari juga definisi class lainnya yang berkaitan.

Belum lagi kalau kita mau ngubah style di class card tersebut, eh tau-tau ternyata ada elemen di tempat lain yang pake juga.

Dan gak seharusnya diubah style nya.

Jadi rusak style nya, padahal niat kita mau ngubah di satu tempat.

Sementara ketika menggunakan Tailwind, kita bisa 100% yakin ketika kita mengubah class di elemen tertentu gak akan merusak style elemen lain!

Thanks to utility class!

Lagipula kalau kalian gak suka liat class Tailwind yang panjang ada vscode extension yang bisa mengurutkan nama class Tailwind di sebuah elemen.

Dan juga ada vscode extension yang bisa melipat class yang panjang tersebut biar gak keliatan ketika lagi gak kita perlu cek.

Update: Beberapa link VSCode extension (Thanks M Haidar Hanif)

• Tailwind IntelliSense: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
• Tailwind Inline Fold: https://marketplace.visualstudio.com/items?itemName=moalamri.inline-fold
• Automatic Sorting with Prettier: https://tailwindcss.com/blog/automatic-class-sorting-with-prettier
• ESLint plugin TailwindCSS: https://github.com/francoismassart/eslint-plugin-tailwindcss

Mnemonic

Tapi bang, “susah banget ngapalin nama class di Tailwind.”

Itu karena kamu gak paham bahasa desain.

Padahal utility class di Tailwind ini sangat mudah dihafal loh karena udah pake konsep Mnemonic.

Apaan tu mnemonic?

Itu adalah cara mudah untuk menghafal sesuatu, kalau saya tanya apa warna pelangi?

Pasti kalian semua langsung tahu dengan cara “Mejikuhibiniu” atau yang kepanjangannya merah jinga kuning hijau biru nila ungu.

Itu salah catu mnemonic.

Tailwind pun memanfaatkan tipe mnemonic yaitu Mnemonic Koneksi atau Connection Mnemonic.

Misalnya margin semuanya pasti di awali huruf “m” untuk classnya. “m-0, m-0.5, m-1, m-2 dst”

Begitu juga margin top akan diawali dengan “mt”, margin bottom “mb” dan lain-lain.

Seperti halnya border akan diawali dengan border.

Nah cuma itu yang perlu kalian tau dan hafalin.

Gak hafal juga gak masalah, karena gampang banget nyari di dokumentasi, mau nyari border tinggal search aja, nyari padding search aja.

Kunci nya bukan soal hafalan class tapi kalian ngerti konsep desain umum yang mau kalian pake.

Gampang banget serius, kalau masih ada yang gak bisa setelah belajar sehari dua hari kayaknya gak mungkin deh.

Apa perlu saya bikinin tutorialnya? Kayaknya gak perlu, soalnya terlalu gampang Tailwind ini.

Yang bikin lama ngertinya sebenernya mungkin karena tadi, kalian gak paham konsep desain umum, layout, bukan gak paham Tailwind nya.

Kecepatan Koding

Tapi bang, “kalau pake Tailwind lama, cepetan koding pake Bootstrap!

Eits, ini karena kalian salah membandingkannya.

Bootstrap itu harusnya jangan dibandingin dengan Tailwind, tapi dengan Tailwind UI atau template Tailwind lainnya.

Yang ngomong gini kan pasti karena kebiasaan pake style bootstrap yang udah jadi komponen.

Misalnya alert, atau accordion, atau button yang udah ada style hover nya, dan komponen bootstrap lainnya.

Makanya kalau pake bootstrap ini pasti keliatan banget.

Kayak kita lihat tuh langsung “Wah pake bootstrap ini mah”, meskipun tema nya udah ganti tetep gak bisa ilang gaya bootstrap nya.

Kalau mau cepet di Tailwind ya pakenya template Tailwind atau yang resmi Tailwind UI tapi berbayar, yang gratis juga banyak.

Tapi saya sendiri hampir gak pernah pake template Tailwind, semuanya custom, baik langsung dari otak maupun dari Figma yg dibikin tim UI/UX.

Kalau kalian punya referensi template Tailwind yang rekomended baik free maupun berbayar, tolong komentar ya. Biar yang butuh jadi tau.

Pake Tailwind ini cepet banget kok! Untuk kustomisasi.

Meskipun judulnya framework CSS, tapi setiap website yang dihasilkan itu bisa beda banget style nya.

Tergantung tiap developernya.

Orang ngeliat tuh gak bisa langsung memastikan, oh ini pake Tailwind pasti soalnya mirip sama kebanyakan website lain.

Secara kustomisasi ini udah hampir setara kalau pake CSS native, tapi dengan speed seperti bootstrap.

Jadi Tailwind ini bener-bener jembatan antara kemudahan kustomisasi CSS native dengan kecepatan pake Bootstrap.

Dan sekali lagi kalau mau lebih cepat ya pake template Tailwind yang udah jadi. Itu jauh lebih cepat lagi, setara pake komponen Bootstrap.

Kalau ini baru apple to apple perbandingannya.

Lagi pula bootstrap versi 5 juga udah niru ada fitur utility class juga sekarang.

Performance

Apalagi yang penting ya.

Ah performance!

Soal CSS ini bisa mempengaruhi performa load web kita.

Kaitannya adalah dengan kode yang gak dipake!

Kalau kita pake CSS native, dan kodebase nya gede. Kita akan sangat rentan kena masalah ini, yaitu kode mati.

Alias aturan-aturan CSS yang sebenarnya udah gak dibutuhkan.

Tapi karena udah terakumulasi kita jadi bingung dan gak berani mau menghapus nya. Takutnya dipake di elemen yang gak kita tahu kan repot.

Efeknya, file css nya jadi gede.

Kalau pake Tailwind gak ada kasus begitu. Tailwind bisa melakukan purge, yaitu dia cuma akan menggenerate class-class yang beneran di pake di source code kita.

Yang gak dipake gak akan digenerate.

File CSS akhirnya jadi sangat kecil dan pastinya membantu untuk performa load web app kita.

Bahkan dengan kombinasi minify dan kompresi yang tepat, Tailwind sendiri mengklaim umumnya ukuran CSS akhirnya di bawah 10kb. (Thanks udah mention ini Gattigaga Hayutta)

Combined with minification and network compression, this usually leads to CSS files that are less than 10kB, even for large projects. ~ Tailwind Docs

Buat kalian yang pake React Native, kalian bisa juga pake class Tailwind ini dengan NativeWind.dev

Oke thank you udah baca, itu aja poin yang ingin saya sampaikan. Kalau kalian punya pandangan lain yang belum dibahas di artikel ini. Silahkan tinggalkan komentar di video youtube terkait.

Mudah-mudahan kalian dapat manfaat dari artikel ini.

Sampai jumpa di artikel berikutnya. Kira-kira bahas apa ya?