Hijrah Ke Tailwind CSS

Daftar Isi

Disclaimer

Artikel ini mungkin terlihat “opinionated”. Di sini saya akan berbagi pengalaman saya pindah ke Tailwind CSS setelah lama menggunakan UI Component seperti Chakra UI dan Bootstrap.

Introduction

Mungkin dari beberapa teman-teman pembaca ada yang menyadari ketika membuka personal website saya di yehezgun.com. Awalnya saya sering menggunakan UI Component library seperti Chakra UI untuk personal project saya, termasuk personal website saya tersebut. Saya pun menyadari ketika sudah bekerja sebagai frontend engineer di tempat saya sekarang, rupanya saya terlalu bergantung pada tools dan mengabaikan fundamentalnya.

Saya pernah diberikan task untuk memperbaiki sebuah layout dengan native CSS, dan butuh sekitar 2 jam untuk bisa menyelesaikannya, padahal itu hanya halaman static biasa. Karena itulah saya memutuskan untuk kembali ke hal-hal fundamental sebelum melangkah lebih jauh.

Saya menemukan bahwa Tailwind CSS ini menarik, jadinya saya putuskan untuk revamp kembali personal web saya dengan starter template saya sendiri (bisa diakses di sini). Sebelumnya, saya mau berterima kasih kepada Theodorus Clarence, karena starter template miliknya ini sangat membantu dan menginspirasi saya untuk membuat starter template saya sendiri. Saya menggunakan ide dan beberapa konsep referensi component yang tentunya saya modifikasi kembali sesuai kebutuhan saya.

Saya tidak mengatakan UI Component library seperti Chakra UI itu buruk. Sebenarnya itu sangat membantu saya ketika harus mengerjakan project yang deadline nya mepet atau harus cepat di-deliver karena mudahnya proses layouting dengan fitur-fitur dari Chakra UI. Tetapi untuk tujuan belajar secara mendalam, saya lebih condong kepada Tailwind CSS. Kurang lebih inilah alasan saya akhirnya menggunakan Tailwind CSS.

Saya Belajar Dasar CSS Ketika Menggunakan Tailwind CSS

Tailwind CSS itu bukan UI Component, melainkan sebuah utility-first framework untuk keperluan styling website. Kurang lebih ketika menggunakan Bootstrap, Chakra UI, atau UI Component lainnya, kita dengan mudah set class name btn misalnya ketika ingin membuat sebuah button atau set component <Button></Button> (biasanya di React).

Di Tailwind CSS, saya harus membuat style sendiri untuk sebuah component dari nol, seperti pada native CSS, tetapi saya bisa lakukan hanya dengan memodifikasi style nya melalui class name pada HTML-nya. Bagi saya, ini seperti menulis inline CSS tetapi dengan cara yang sedikit lebih elegan dan lebih mudah.

Contoh kode:

<button class="bg-sky-600 py-1 px-2 rounded-md">
  Save changes
</button>
html

Jika saya ingin menambahkan hover effect, saya cukup tambahkan hover:bg-sky-700 di class name. Cukup mempermudah bukan?

Nah sampai di sini ada yang menyadari sesuatu?

Sembari menggunakan Tailwind CSS, rupanya saya juga harus paham dasar-dasar CSS lagi nih setelah lama tidak didalami, hahaha. Ini menarik, ketika saya membuat custom styling dengan Tailwind, saya juga harus konsep dasar styling sekalipun saya tidak menggunakan syntax CSS secara langsung.

Contohnya, ketika saya ingin membuat layout sederhana seperti gambar di bawah. Ketika saya menggunakan UI Component seperti Chakra UI, saya bisa mudahnya menggunakan Flex component bawaan dari Chakra UI. Berbeda dengan Tailwind, saya harus styling flex, flex item, spacing nya secara “manual”. Tentu saja, button di gambar di bawah ini, saya juga styling sendiri dengan Tailwind mulai dari border, hover effect, dan bahkan inner padding-nya.

Bagi saya, tentu ini adalah hal yang sangat berguna walaupun cukup melelahkan, hahaha. Ketika saya sedang dalam tahap mencari pekerjaan tahun lalu, saya sempat diwawancarai oleh beberapa user dari beberapa perusahaan dan feedback dari mereka hampir mirip, “Kamu bisa design web kamu sendiri pake tools ini dengan gampangnya. Tapi di perusahaan kita butuhnya yang bisa native CSS karena website kita gak pake framework CSS supaya bisa dicustom lebih leluasa”.

Saya sempat membaca Theodorus Clarence’s docs site, dan dia sempat menuliskan bahwa sudah sepatutnya kita sebagai programmer harus pelajari fundamental terlebih dahulu sebelum melangkah lebih jauh. Dan saya berani bilang itu sangat valid. Dalam pengalaman saya, saya pernah ditolak oleh recruiter karena saya gagal dalam live code session yang mengharuskan saya untuk coding dengan native CSS.

Sebagai karyawan fulltime dan sudah lulus dari kampus hampir 2 tahun lalu, tentunya saya harus mencari teknik belajar yang efektif sehingga saya bisa adaptasi dengan situasi saat ini dan deliver outputnya dengan cepat. Saya sebenarnya bisa saja belajar lagi CSS dari nol, tapi bagi saya itu terlalu lama dan saya butuh pekerjaan saat masih dalam masa “job-seeking”.

Sampai akhirnya saya menemukan Tailwind CSS ini, seperti yang sempat saya katakan, saya bisa sambil belajar dasar CSS sembari menggunakannya.

Bisa Di-Custom Lebih Leluasa

Karena Tailwind ini adalah utility-first framework, saya tentunya bisa custom setiap halaman atau komponen yang ada di dalam website yang saya develop. Saya bahkan bisa saja membuat design system saya sendiri dengan Tailwind ini kalau saya mau dan punya waktu, hahaha.

Sudah lihat Theodorus Clarence’s Next.js + Tailwind CSS Starter Template? Menurut saya, ini seperti mini design system yang dikemas dalam bentuk starter template. Inilah yang menginspirasi saya untuk membuat template serupa untuk personal project saya ke depan.

Singkatnya, dengan Tailwind CSS, saya bisa memiliki kontrol penuh ketika styling di halaman web yang sedang saya develop.

Saya Bisa Memaksimalkan Penggunaan Tag HTML5

Ini mungkin yang paling “opinionated” ya. Ketika saya menggunakan Tailwind, saya merasa bahwa saya bisa memaksimalkan penggunaan dan pemahaman tag HTML5.

Seperti penjelasan poin pertama, ketika saya menggunakan tag dasar HTML5, secara tidak langsung saya dipacu lagi untuk memahami best practice struktur HTML5 yang bisa saya terapkan.

Seperti kata banyak orang, ternyata penggunaan tag HTML5 itu bisa berkorelasi dengan persentasi SEO loh. Contoh artikelnya bisa dibaca di sini.

Closing

Kalau kamu merasa belajar dari nol itu memakan terlalu banyak waktu, mungkin mempelajari tool, library, atau framework yang membuat kamu harus mempelajari fundamental sembari menggunakannya bisa membantu proses belajarmu.

Sebagai karyawan fulltime atau jobseeker yang telah lulus kuliah, pastinya harus bisa belajar dengan cepat mengejar segala ketertinggalan yang ada kan karena kita berpacu dengan waktu, terutama saat butuh pekerjaan dengan cepat. Belajar dari nol sepertinya terlalu melelahkan dan terlalu lama.

Inilah sebabnya kita perlu bijak ketika memilih tool, library, atau framework. Pilihlah yang sebisa mungkin mendorong diri sendiri untuk memahami fundamentalnya sembari menggunakannya. Dalam kasus saya, Tailwind CSS ini saya rasa membantu saya memahami dasar CSS sembari melalui syntax-syntax Tailwind tersebut.

Semoga artikel ini bisa menginspirasi ya, saya masih amatir dalam menulis artikel hahaha. Kalau mau diskusi lebih lanjut, sangat boleh kok. Tuliskan saja di kolom komentar di bawah ya.

References:

Theodorus Clarence’s Docs Site
Theodorus Clarence’s Next.js + Tailwind CSS Starter Template