Membandingkan TailwindCSS dengan Framework Lain

Pranala

TailwindCSS merupakan sebuah Framework CSS yang dibuat oleh Adam Wathan. Tidak main-main, pertumbuhan TailwindCSS cukup spektakuler.

Sumber Gambar dari Twitter

Konsep yang diusung oleh TailwindCSS memang cukup spektakuler, yaitu utility first dimana kita tidak perlu meninggalkan html/jsx kita untuk bisa menuliskan css yang kita mau.

Mungkin sedikit mirip kali ya dengan CSS-in-JS atau styled component yang mana tidak perlu keluar dari file jsx/html kita untuk melakukan styling pada komponen kita.

Lantas Apa yang Membuat TailwindCSS Banyak digunakan ?

Opini saya sendiri yang saat ini sudah berpindah ke TailwindCSS pada beberapa proyek karena

Solusi atas Masalah Nama Class

Memberikan solusi terhadap pemberian nama komponen. Tidak perlu memusingkan dengan konsep BEM atau penamaan setiap komponen karena kita sudah menuliskan sebuah komponen berdasarkan stylingnya. Misalnya saja biasanya sebuah button memiliki nama seperti ini

<button type="button" class="btn btn-primary">Primary</button>

menjadi seperti ini

<button type="button" class="transition duration-150 ease-in-out transform hover:scale-125 bg-emerald-600 text-white font-semibold py-3 px-6 rounded-md" > Primary </button>

Menulis Ulang CSS

Awal saya melakukan slicing dari desain website kantor, saya mencoba menggunakan Boostrap. Hasilnya? 70% saya melakukan penulisan ulang semua komponen yang ada. Misalnya button yang memiliki warna primary berbeda, padding yang berbeda. Saya terpaksa harus menulis ulang. Seolah olah, saya tidak menggunakan sebuah framework. Hanya 20% saja mungkin class pada framework Boostrap yang saya gunakan.

Menyediakan API untuk Style Guide / Design System

Desainer pasti sudah memiliki styleguide bukan? Apalagi kalau perusahaan besar pasti sudah memiliki design sistem. Nah, styleguide ini sebagai patokan kita dalam melakukan styling pada setiap komponen yang ada pada wesbite. Misalnya saja styling untuk button, paragraf, warna dan lain sebagainya.

Sehingga ketika kita ingin implementasikan styleguide yang telah ada, kita tinggal memanggilnya saja. Mudah bukan?

AutoPrefixer dan Menghapus CSS yang Tidak digunakan

Tidak perlu lagi memikirkan masalah prefixer karena saat config awal, kita sudah diharuskan untuk menambahkan AutoPrefixer yang merupakan bagian dari pustaka PostCSS. Ketambahan lagi dengan ada PurgeCSS untuk menghapus file CSS yang tidak kita gunakan saat production sehingga hanya file CSS yang digunakan saja yang akan dibuild.

Contohnya bisa teman-teman lihat pada https://dashboard-cowork.vercel.app/ yang sudah saya setup agar menghapus css yang tidak digunakan.

Support Dark Mode versi 2.0

Ini belum saya coba, tapi sejak versi 2.0 TailwindCSS sudah mendukung Dark Mode. Penggunakan Dark Mode versi TailwindCSS bisa dengan 2 cara. Pertama dengan menggunakan media dimana darkmodenya berdasarkan setting dari komputer / browser user. Kedua dengan menggunakan class, yaitu toggle dari user itu sendiri.

Dokumentasi Dark Mode TailwindCSS bisa dibaca disini

Lantas Kapan Sebaiknya Kita Menggunakan TailwindCSS?

• Apakah kamu membutuhkan framework untuk implementasi custom desain? Gunakan TailwindCSS
• Apakah kamu membutuhkan framework untuk membuat custom component sendiri? Gunakan TailwindCSS

Bagi saya sendiri, TailwindCSS cocok untuk mereka yang membutuhkan styling custom dan tidak membutuhkan ready-component, dan tidak mempusingkan mengenai penamaan class.