React Component Styling: Tailwind CSS, CSS Modules, dan Sass

Saat kita membangun aplikasi dengan React, tentunya kemungkinan besar kita juga akan berkutat dengan CSS styling (kecuali kalau kamu berbagi jobdesk, atau websitemu tidak ada CSS-nya sama sekali 🙃). Nah pertanyaannya, dengan standar seperti apa kita akan melakukan styling terhadap komponen-komponen React kita?

Kalau berdasarkan pengalaman saya, saya menggunakan tiga library sekaligus: Tailwind CSS, CSS Modules, dan Sass. Dengan ketiga library tersebut, saya dapat melakukan styling dengan cepat, powerful, modular, dan konsisten. Pembagiannya kurang lebih seperti ini:

• Tailwind CSS untuk kecepatan.
• CSS Modules untuk modularity.
• Sass untuk power, kecepatan, dan konsistensi.

Tailwind CSS

Tailwind CSS pada dasarnya adalah kumpulan class dari properti-properti CSS. Sepertinya, hampir tiap properti pada CSS memiliki class-nya sendiri pada Tailwind ini. Lalu, apa manfaatnya? Manfaatnya adalah kita dapat menerapkan properti CSS tanpa harus membuat file atau kode CSS lagi, dan tiap class-nya tidak saling mempengaruhi karena hampir tiap satu class hanya mengandung satu properti.

Contoh:

Gambar 0.1 — Komponen Progress Bar

Kodingan di atas merupakan komponen ProgressBar yang menggunakan class dari Tailwind CSS, yaitu h-[4px], w-full, dan bg-[lightgreen].

• h-[4px]: mengandung CSS height: 4px.
• w-full: mengandung CSS width: 100%.
• bg-[lightgreen]: mengandung CSS background-color: lightgreen.

Mengapa ada class dengan tanda square bracket ([….])? Ini merupakan fitur dari Tailwind CSS yaitu mode JIT (Just-in-Time) di mana value dari class CSS dapat kita atur sesuai kemauan kita walaupun secara default Tailwind CSS tidak menyediakannya. Ketika kita mengaktifkan fitur JIT mode lalu terdapat class h-[4px] seperti di atas, maka artinya akan dibuat class dengan css height: 4px. Seperti halnya juga dengan bg-[lightgreen] di mana sebelumnya, sebenarnya Tailwind CSS tidak menyediakan class tersebut, namun dengan diaktifkannya fitur JIT mode, maka bg-[lightgreen] akan menghasilkan class dengan css background-color: lightgreen.

Kelebihan

• Proses development menjadi sangat cepat, efisien, dan efektif.

Kekurangan

• Kodingan menjadi terkesan kotor, karena jika kita butuh banyak css maka class yang digunakan bisa banyak sekali dan memanjang. Tapi hal ini bersifat relatif, kalau saya sih tidak masalah. Saya bisa merapihkannya dengan CLSX. Contoh komponen dengan class Tailwind CSS yang panjang dan CLSX:

Gambar 0.2 — Class Tailwind CSS

CSS Modules

Dari repo aslinya, CSS Modules adalah:

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default

Artinya, setiap nama class yang dibuat dengan CSS Modules akan dibuat unik, apa pun nama class tersebut saat development. Misal kita memiliki komponen Button dengan CSS Modules:

• Nama class pada file CSS Modules: .secondary.
• Nama class pada saat aplikasi dijalankan: .Button_secondary__N6qTA.

Mengapa kita butuh hal seperti itu? Hal ini agar saat menamai suatu class CSS untuk suatu komponen, kita tidak perlu mengkuatirkan nama class tersebut akan bentrok dengan nama class lainnya. Hal ini akan sangat berguna pada sebuah projek besar yang mengikutsertakan banyak sekali programmer, yang mana tiap programmer tidak harus mengecek apakah nama class sudah diambil oleh class lain. Proses development pun bisa menjadi lebih cepat.

Sass

Sass merupakan CSS dengan superpower. Well, sebenarnya doi bukan murni CSS, melainkan sebuah preprocessor CSS dan bahasa SassScript yang kemudian diproses menjadi CSS murni.

File Sass terdiri atas CSS dan fitur tambahan dari Sass berupa SassScript yang memiliki banyak fitur. Fitur tersebut contohnya:

• Variabel.
• File import.
• Operator matematika (tanpa calc()).
• Helper functions.
• dll.

SassScript tersebut kemudian diproses dan menjadi CSS murni. Agar lebih mudah dipahami, mari kita lihat contohnya:

Misalkan kita punya variabel primary-color:

$primary-color: #b37399;

Lalu kita ingin punya class dengan warna yang lebih gelap 20% dari warna pada variabel tersebut, maka kita dapat menggunakan helper function darken():

.button {
    background: darken($primary-color, 20%);
}

Maka Sass di atas akan menjadi CSS murni setelah diproses:

.button {
    background: #7c4465;
}

Jadi mudah sekali bukan dalam memanipulasi CSS? Dua fitur di atas baru sebagian dari fitur Sass saja.

Sass ini pun dapat digabungkan dengan file CSS Modules. Yup, artinya di dalam CSS Modules kita dapat memanfaatkan fitur-fitur dari Sass, termasuk variabelnya.

Bonus: CLSX

CLSX merupakan library dengan fungsi untuk membantu menggabungkan nama class pada komponen React. Contohnya ada pada gambar 0.2, di mana kita bisa mengisolasi penempatan tiap nama class, sehingga lebih mudah dibaca dan diatur.

Penutup

Kurang lebih seperti itulah saya melakukan styling terhadap komponen-komponen React. Buat kamu yang sedang kebingungan konsep seperti apa sebaiknya yang kamu gunakan untuk melakukan styling pada komponen React, cara-cara di atas bisa dijadikan pertimbangan.

Oh ya, kalau ada kesalahan pada penulisan, teknis maupun penjelasan di atas, please CMIIW yaa, karena di sini kita sama-sama belajar :) Terimakasih sudah membaca!