Review Tailwind CSS Untuk Fast Prototyping

Catatan eksplorasi setelah satu minggu berinteraksi dengan Tailwind CSS.

Apa Itu Tailwind CSS?

Dikutip dari homepage Tailwind CSS:

A utility-first CSS framework for rapidly building custom designs.

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Tailwind CSS dikembangkan dengan tujuan untuk mempercepat proses prototyping halaman web agar sesuai kebutuhan (custom). Tailwind CSS mencoba mengambil pendekatan lain dalam pengembangan web, yang selama ini didominasi Bootstrap, agar tidak ada lagi istilah “tampilan sejuta umat” karena kemiripan antara web yang satu dengan yang lain (karena sama-sama memakai tema default Bootstrap, minim kustomisasi).

Poin Penting Dari Tailwind CSS

Utility First

Tailwind CSS menyediakan banyak sekali CSS class yang siap pakai untuk membangun UI sesuai kebutuhan.

Cheatsheet class yang dimiliki Tailwind CSS:

https://www.reddit.com/r/webdev/comments/dajyf1/a_very_elegant_and_helpful_tailwindcss_cheatsheet/

Berbeda Dengan Bootstrap atau Semantic UI

Tailwind CSS adalah low-level CSS framework, sedangkan Bootstrap atau Semantic UI adalah sebuah UI toolkit yang lengkap dengan sekumpulan predefined component siap pakai.

Di Bootstrap, kita membuat sebuah card dengan:

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div> 

Di Tailwind, tidak ada komponen siap pakai bernama card, tapi kita bisa dengan cepat membuat card versi kita sendiri dengan melakukan mix and match dari class CSS yang sudah disediakan:

<div class="rounded shadow bg-white">
    <div class="p-4">
        Some content...
    </div> 
</div>

Sekilas terlihat kurang praktis, tapi ini sesuai dengan tujuan awal pembuatan Tailwind, yaitu agar setiap website punya tampilan yang unik namun bisa dibuat dalam waktu yang lebih cepat.

Kita bisa membuat website dengan sangat cepat memakai Bootstrap, tapi dengan drawback tampilannya ya seperti itu saja. Jutaan website lain diluar sana juga memiliki tampilan yang sama. Lalu kemudian kita melakukan kustomisasi tema default Bootstrap untuk mendapatkan tampilan yang unik. Bisa jadi usaha untuk kustomisasi ini jauh lebih besar dibanding usaha untuk prototype di awal.

Jika seperti itu, kenapa tidak sekalian membuat custom design dari awal, menggunakan utility-first CSS seperti Tailwind ?

Meminimalisir Penulisan Custom CSS

Membuat tampilan web dengan Tailwind, kita bisa sedikit melupakan metode BEM atau OOCS. Kita bisa melupakan konvensi penamaan sebuah class. Kita bahkan tidak perlu menulis custom CSS class sama sekali.

Cukup mix and match utility class yang sudah disedikan Tailwind:

<div class="shadow-lg rounded-lg">
  <div class="bg-white px-6 py-6 rounded-t flex">
    <div class="flex-grow font-bold text-teal-600">
      Surat Al-Baqarah Ayat 47
    </div>
    <div>
      <span class="rounded-lg bg-orange-200 text-orange-600 text-xs px-2 py-1">tafsir</span>
    </div>
  </div>
  <div class="px-6 pb-6 rounded-b text-sm bg-white">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolores et iste iusto laborum nihil provident quas reiciendis totam. Blanditiis est expedita nam quaerat qui quisquam reprehenderit vel velit? Consequuntur.
  </div>
</div>

Dan hasilnya:

Nama Class Bisa Sangat Panjang

Seperti yang bisa dilihat pada contoh kode di atas, nama class yang kita tuliskan di tag HTML bisa sangat panjang, bahkan hanya sekedar untuk membuat label:

class="rounded-lg bg-orange-200 text-orange-600 text-xs px-2 py-1"

Tentu ini akan memunculkan pertanyaan selanjutnya, kalau label ini dipakai di banyak tempat, bagaimana nanti maintenance-nya? Kalau style untul label berubah, apakah harus mengganti satu per satu?

Permasalahan di atas bisa diatasi dengan salah satu dari dua cara berikut:

1. Ekstrak menjadi komponen HTML (Vue Component, Blade Component, dan lainnya).
2. Ekstrak sekumpulan class tersebut menjadi satu class sendiri menggunakan @apply.

Penjelasan lebih lengkap tentang ekstraksi komponen bisa dibaca di https://tailwindcss.com/docs/extracting-components/#app.

Hasil Review Setelah Seminggu Pemakaian

Sebagai gambaran, saya mencoba memakai Tailwind untuk prototyping pembuatan tafsirq versi 2 (v2.tafsirq.com), murni penyegaran tampilan saja tanpa mengubah fitur. Berikut ini kesan yang saya rasakan:

1. Jika sudah terbiasa dengan HTML dan CSS, maka memakai Tailwind sangat meningkatkan produktifitas. Di tahap awal, saya cukup fokus pada satu file (file HTML) dan tidak perlu switching ke file lain, misalnya file CSS untuk menulis custom style atau memikirkan penamaan class.
   Buka file, tulis HTML, tambahkan class yang diinginkan, dan saya mendapatkan tampilan yang diinginkan. Sederhana itu workflownya.
2. Membuat tampilan yang mobile-first menjadi sangat mudah, karena Tailwind sudah menyediakan semua kombinasi class untuk setiap ukuran layar. Ingin satu kolom di layar kecil tapi 3 kolom di layar besar, mudah. Ingin ukuran text 1em di layar kecil tapi 3em di layar besar, gampang. Sekali lagi, coba buka v2.tafsirq.com dan cek responsiveness-nya. Itu sangat mudah dilakukan.
   Lebih jauh tentang responsiveness: https://tailwindcss.com/docs/responsive-design.
3. Karena custom CSS bisa diminimalisir, maka effort yang diperlukan untuk maintenance otomatis menjadi lebih mudah. Cukup memakai referensi dari dokumentasi resmi Tailwind CSS, tim baru bisa up & running dengan lebih cepat untuk melakukan kustomisasi tampilan.
4. Salut buat creator Tailwind, semua aspek diperhatikan sangat detil. Bagaimana implementasi shadow, color palette, responsiveness, performa, hingga developer experience sangat diperhatikan. Sekedar informasi, Tailwind CSS ini dibuat oleh duet programmer (Adam Wathan) dan desainer (Steve Schoger), jadi sangat wajar jika apa yang mereka hasilkan sangat nyaman baik dari sisi teknis kode maupun kualitas tampilan yang dihasilkan.
5. Sebelum mencoba Tailwind, saya membaca buku Refactoring UI. Saya bukan desainer, tapi dari buku tersebut saya belajar, seorang (frontend) developer juga bisa membuat tampilan UI yang bagus. Mungkin tidak sampai level WOW (out of the box), tapi minimal nyaman digunakan. Tidak perlu bakat desainer, semua ada petunjuk dan best practice-nya.
6. Theming (mengubah warna dasar) menjadi lebih mudah.
7. Belum ada komponen untuk form (dan berbagai variasi fieldnya). Hal inilah yang menyebabkan saya belum yakin untuk memakai Tailwind CSS dalam pembuatan aplikasi (CRUD) web yang ada admin panelnya. Mungkin Tailwind perlu dikombinasikan dengan library lain.

Hasil Akhir

Berikut ini beberapa contoh tampilan hasil fast prototyping dengan Tailwind CSS. Di sebelah kiri adalah iterasi pertama, sedangkan di sebelah kanan adalah iterasi kedua dengan penambahan warna, ilustrasi, dan styling icon. Setiap halaman membutuhkan waktu antara 1–4 jam (tergantung kompleksitas konten) lengkap dengan responsiveness-nya.

Bagaimana menurut Anda? Punya pengalaman memakai Tailwind CSS juga? Tulis di kolom komentar ya :)