Apa itu Tailwind CSS?

Berdasarkan Hubspot, Tailwind CSS adalah utility-first framework CSS yang didesain untuk mempermudah dan mempercepat pembuatan aplikasi menggunakan desain custom.

Utility-first classes merupakan utilitas tingkat rendah (low-level) untuk membuat desain khusus di dalam file HTML. Developer hanya perlu memberi nama kelas utilitas sesuai tujuan yang dimaksud, sehingga nama kelas tersebut bisa dipahami banyak orang.

Dengan menggunakan kelas-kelas utilitas, developer dapat mengontrol layout, warna, spasi, tipografi, bayangan, dan lain-lain supaya desain komponennya bisa sesuai kebutuhan. Pekerjaan itu bisa dilakukan tanpa perlu meninggalkan kode HTML atau menulis CSS khusus.

Konsep menarik dari Tailwind yaitu framework ini mengutamakan utilitas untuk membuat desain khusus. Tailwind tidak menawarkan style dan template tertentu. Sebagai gantinya, Tailwind menawarkan opinionated building blocks yang dikenal sebagai kelas utilitas untuk membantu mengatur style komponen website.

Untuk membuat user interface yang menarik, developer bekerja dengan menggabungkan komponen-komponen kecil. Tailwind hanya mengambil file CSS mentah, memprosesnya melalui file konfigurasi, lalu menghasilkan output yang diinginkan.

Fungsi Tailwind CSS

Berbeda dengan framework CSS lainnya seperti Bootstrap atau Materialize, Tailwind merupakan framework yang lebih sederhana. Tailwind tidak menyediakan komponen siap pakai seperti button, dropdown, atau navigation bar dengan style yang sudah ditentukan. Sebaliknya, framework ini menawarkan kelas utilitas yang memungkinkan developer untuk membuat komponen mereka sendiri dan dapat digunakan kembali sesuai kebutuhan.

Developer juga memiliki lebih banyak fleksibilitas dan kendali terhadap tampilan aplikasi, sehingga memungkinkan pembuatan situs yang lebih unik.

Berikut beberapa fungsi Tailwind CSS dirangkum dari Hubspot:

• Mengurangi penulisan CSS khusus: developer bisa mengatur tampilan elemen menggunakan kelas-kelas yang sudah ada langsung di HTML. Mereka juga dapat membuat desain kustom tanpa perlu menulis CSS.
• Bisa menjaga ukuran file CSS tetap kecil: jika tidak menggunakan framework seperti Tailwind, developer harus terus menulis CSS saat menambahkan fitur dan komponen baru. Akibatnya, file CSS akan semakin besar dan berat. Namun dengan menggunakan utilitas seperti flexbox dan padding di Tailwind, sebagian besar style dapat digunakan kembali sehingga tidak perlu perlu menulis CSS baru.
• Tidak perlu menciptakan nama kelas sendiri: developer bisa memilih kelas-kelas dari sistem desain dengan nama yang sudah ditentukan sebelumnya. Mereka tidak perlu bingung mencari nama kelas untuk style dan komponen tertentu, atau bahkan mengingat nama-nama yang rumit.
• Bisa melakukan perubahan dengan lebih aman: dalam pendekatan tradisional, saat melakukan perubahan pada CSS kemungkinan akan merusak halaman situs secara keseluruhan. Namun, kelas utilitas dalam HTML bersifat lokal yang dapat diubah tanpa khawatir merusak hal lain di website.

Kapan Menggunakan Tailwind CSS?

Tailwind CSS merupakan pilihan yang cocok untuk membuat prototipe secara cepat. Dengan menggunakan kelas utilitas dari Tailwind CSS, developer bisa dengan mudah meniru komponen aplikasi tanpa perlu repot menulis CSS khusus atau mengubah style yang sudah ada. Hal ini memungkinkan mereka untuk bisa fokus pada layout dan fungsionalitas halaman.

Selain itu, Tailwind CSS juga berguna untuk menciptakan desain yang konsisten. Developer bisa menggunakan kelas-kelas yang sama di seluruh proyek untuk memastikan keseragaman desain tanpa perlu mengingat atau mencari nama kelas yang berbeda.

FAQ (Frequently Asked Question)

Apa perbedaan Tailwind vs Bootstrap?

Bootstrap merupakan salah satu framework untuk pembangunan website yang responsif dan mobile-friendly. Di sisi lain, Tailwind CSS adalah framework CSS untuk mengembangkan user interface dengan cepat.

Perbedaan utama antara Tailwind CSS dan Bootstrap terletak pada pendekatan yang digunakan. Tailwind CSS bukanlah kit UI yang sudah jadi dan siap pakai, berbeda dengan Bootstrap yang sudah memiliki template khusus.

Tailwind CSS tidak memiliki tema atau komponen user interface bawaan. Namun, framework ini menyediakan kelas-kelas utilitas yang dapat digunakan untuk membangun situs dari awal.

Berikut ini adalah beberapa perbedaan lain antara Tailwind dan Bootstrap dirangkum dari Tutorials Point:

• Tailwind CSS menawarkan pendekatan yang lebih custom dan fleksibel dalam desain  user interface. Sedangkan Bootstrap menyediakan tema dan template siap pakai.
• Aplikasi dan website yang dibuat menggunakan Tailwind CSS memiliki tampilan yang unik dan fleksibel. Sementara aplikasi yang dibuat dengan Bootstrap umumnya memiliki tampilan yang serupa karena menggunakan template bawaan.
• Dibandingkan Tailwind CSS yang cenderung baru dan masih terus berkembang, Bootstrap sudah lebih lama eksis karena dikenal responsif serta efisien.
• Tailwind CSS memiliki ukuran file yang lebih kecil, berbeda dengan Bootstrap yang membutuhkan ukuran file lebih besar.
• Beberapa perusahaan terkenal yang menggunakan Tailwind CSS antara lain MAKE IT, Superchat, dan Livestorm. Bootstrap digunakan oleh perusahaan terkenal lainnya seperti Twitter, LinkedIn, Spotify, dan StackShare.