Apa itu Tailwind CSS
Tailwind CSS merupakan sebuah CSS framework yang berisikan kumpulan dari class-class CSS siap pakai yang dapat kita gunakan langsung untuk melakukan styling pada elemen-elemen HTML.
Alasan menggunakan Tailwind CSS
Tailwind CSS berbeda dengan Boostrap yang menyediakan beragam macam komponen. Tailwind CSS bersifat low-level karena hanya berisikan kumpulan utility class.
Dengan Tailwind CSS, kita dapat menggunakan class-class CSS siap pakai yang disediakan untuk menghindari penggunaan arbitrary values yang umum kita gunakan saat menulis kode CSS sehingga kita dapat membuat style yang lebih konsisten.
Jadi pada dasarnya kita bisa langsung menerapkan class pada elemen-elemen HTML tanpa perlu untuk menulis kode CSS pada file terpisah. Kita pun bisa juga menerapkan media query untuk responsive design, interaksi seperti hover dan focus, dan juga dark mode langsung dengan memberikan class CSS pada elemen-elemen HTML yang diinginkan.
Saat production, Tailwind CSS otomatis akan menghapus semua class-class CSS nya yang tidak kita gunakan dan akan menghasilkan sekitar kurang dari 10kb CSS sehingga CSS akan lebih cepat dimuat oleh browser pengguna.
Tailwind CSS juga dapat kita customize sesuai kebutuhan kita. Misalnya kita ingin menggunakan font-family, warna, dan ukuran margin pilihan kita, kita dapat melakukannya pada file konfigurasi yang sudah disediakan yaitu tailwind.config.js.
Selain itu untuk menunjang proses development, secara resmi Tailwind CSS menyediakan extension-nya untuk Visual Studio Code. Dengan ini kita bisa memiliki autocomplete suggestion saat menerapkan class-class Tailwind CSS pada elemen HTML.
Menggunakan Tailwind CSS
Setelah kita melakukan instalasi dan konfigurasi Tailwind CSS, kita bisa langsung menggunakan class-class yang disediakan untuk diterapkan pada elemen-elemen HTML.
Apa dengan Tailwind CSS kita tidak perlu belajar CSS dasar? tentu tidak. Alangkah baiknya kita belajar CSS dasar dulu sebelum belajar Tailwind CSS. Dengan begitu kita bisa paham style apa yang harus kita terapkan saat mengeksekusi UI design.
Walau kita bisa menerapkan style hanya dengan menggunakan class-class yang disediakan Tailwind CSS, adakalanya kita masih harus menerapkan inline-style atau custom class saat berhadapan dengan UI design yang tidak konsisten.
Kesimpulan
Saya selalu menggunakan Tailwind CSS saat menerapkan style pada project di pekerjaan. Karena saya merasa produktifitas saya meningkat. Saya nggak perlu pusing mikirin bikin nama class baru dan juga terlalu pusing mikirin optimasi. Beri kesempatan pada diri kalian untuk mencoba Tailwind CSS dan rasakan manfaatnya.