Sebelumnya, blog ini dibangun menggunakan Chakra UI. Namun ternyata, blog ini menjadi cukup berat diakses oleh pengguna dengan internet yang lambat, dan juga memiliki isu dengan server-side rendering.
Akhirnya, saya memutuskan untuk mencoba Tailwind CSS karena utility CSS classes atau atomic CSS sering saya dengar dan membuat saya tertarik sejak satu semester kebelakang.
Dan ternyata... Tailwind CSS memiliki developer-experience yang bagus dan juga performa yang sangat cepat.
Impresi Pertama
Pertama, saya sama sekali tidak punya pengalaman dengan utility CSS classes atau atomic CSS ini. Saya hanya memiliki pengalaman dengan library UI component, yang sudah menyediakan segala sesuatunya untuk saya. Seperti komponen, Button, Card, Dropdown, sudah tersedia dan siap dipakai.
Bahkan awalnya, saya merasa tidak ingin mempelajari Tailwind CSS, karena menurut saya, terlalu kompleks dan ribet. Semua komponen yang saya butuhkan, harus saya buat sendiri. "Itu akan menjadi hal yang sangat melelahkan", pikirku.
Tapi karena saya punya waktu luang, jadi saya putuskan untuk mencobanya.
Ide → Kode
Hal pertama yang orang selalu bilang pada saya tentang Tailwind CSS adalah kemudahan untuk menuangkan ide styling yang ada di kepala ke dalam kode. Dan setelah saya mencobanya, ternyata itu benar, namun dengan syarat.
Kita harus familiar dengan utility class names yang Tailwind CSS berikan. Contohnya, jika kita ingin membuat segala komponen yang ada dalam div berada di tengah dengan menggunakan vanila CSS, kita menulisnya seperti ini:
* {
display: flex;
align-items: center;
justify-content: center;
}Namun di Tailwind CSS kita menulisnya seperti ini:
<div className="flex items-center justify-center"></div>Pada awalnya, saya agak kebingungan. Karena, beberapa class names ternyata berbeda dengan property aslinya yang ada pada vanila CSS. Namun, dokumentasi mereka sangat bagus dan memudahkan kita untuk mencari class names yang kita butuhkan.
Performa
Hal yang kedua adalah performanya. Karena Tailwind CSS menggunakan library PurgeCSS yang dapat menghapus styles yang tidak kita butuhkan. Hal tersebut, membuat ukuran hasil kompilasi CSS-nya menjadi sangat kecil dan bersahabat dengan pengguna yang memiliki koneksi lambat.
Cara membuat PurgeCSS bekerja cukup mudah. Hanya dengan menambahkan properti purge pada tailwind.config.js seperti ini:
/**
* Isi properti `purge` dengan semua berkas yang menggunakan
* Tailwind CSS.
*/
module.exports = {
purge: [
'./**/*.html', // Untuk HTML
'./**/*.vue', // Untuk Vue
'./**/*.jsx', // Untuk React / Vue that uses JSX
'./**/*.js', // Untuk React
],
theme: {},
variants: {},
plugins: [],
}Keuntungan performa ini tidak hanya dalam production build saja, namun juga dalam development build. Karena ada fitur just-in-time (jit) yang disediakan oleh Tailwind CSS.
Dahulu sebelum ada fitur just-in-time ini, Tailwind CSS mengkompilasi semua utility classes dalam initial build time. Dengan begitu ukuran hasil kompilasinya menjadi besar. Tidak efektif bagi kita yang hanya menggunakan beberapa utility classes saja.
Nah, fitur tersebut hadir dengan berbentuk sebuah compiler baru yang mengkompilasi styles sesuai kebutuhan kita yang kita tulis di dalam kode. Hasil kompilasinya jauh lebih kecil, dan initial development build time menjadi jauh lebih cepat.
Dengan fitur just-in-time, saya juga bisa menulis style kustom di dalam class names tanpa harus membuat CSS kustom. Contohnya, jika saya ingin melakukan kustomisasi margin left pada komponen card saya:
/* Kita tidak perlu menulis seperti ini lagi: */
<Card className="..." style={{ marginLeft: 10 }} />
/* Kita tinggal menulisnya seperti ini: */
<Card className="ml-[10px]" />Kita dapat menggunakan fitur just-in-time dari Tailwind CSS dengan menambahan sebuah key bernama mode di dalam tailwind.config.js seperti ini:
// tailwind.config.js
module.exports = {
mode: 'jit',
// ... konfigurasi lainnya
}Untuk belajar lebih dalam tentang fitur just-in-time, baca disini.
Metriks Lighthouse
Sebelumnya, saat blog ini masih menggunakan Chakra UI, nilai performa dari metriks Lighthouse hanya di sekitar 80. Walaupun sebenarnya sudah cukup baik, namun skor tersebut dikategorikan di skala kuning, yang artinya masih dapat diperbaiki.
Sekarang, setelah blog ini menggunakan Tailwind CSS, skornya naik cukup drastis, ke skor yang hampir sempurna, saat dites menggunakan browser Chrome dalam mode incognito.
Setelah itu, saya mencoba untuk melakukan test lagi via web.dev untuk melihat apakah hasil yang saya dapat sebelumnya sudah akurat atau belum. Dan ternyata hasilnya cukup mengejutkan karena mirip dengan hasil tes yang sebelumnya.
Kesimpulan
Dengan hasil tersebut, saya sangat senang sudah menyediakan waktu untuk belajar Tailwind CSS dan saya sangat menyukainya. 😍
Walaupun menurut saya, Tailwind CSS hanya cocok untuk saya saat saya mengerjakan project yang skalanya kecil. Karena di pekerjaan saya sehari-hari, saya dituntut bekerja dengan cepat karena waktu pengerjaan yang singkat. Dalam hal ini, Tailwind CSS tidak dapat membantu saya. Saya harus membuat semua komponen yang saya perlukan sendiri, dan itu membutuhkan banyak waktu dan tenaga.
Saya pernah berpikir untuk membuat library UI komponen sendiri menggunakan Tailwind CSS. Tapi karena saya belum sempat belajar dan mendalami bagaimana cara membuat design system juga library UI komponen, saya masih hanya memikirkannya saja.
Last but not least, saya masih belajar tentang Tailwind CSS sampai hari ini. Jika Anda ingin mengobrol atau Anda memiliki lebih banyak pengetahuan tentang Tailwind CSS, Anda bisa menghubungi saya via Twitter!
Terima kasih sudah membaca, stay safe dan have a nice day. 😁