Apa Itu Tailwind CSS dan Perbedaan Tailwind dengan Bootstrap

Ketahui Apa Itu Tailwind CSS dan Perbedaan antara Tailwind dengan Bootstrap

March 15, 2024

Seiring berjalannya waktu, framework yang digunakan pada sebuah website dapat beraneka ragam. Salah satunya adalah Tailwind CSS. Ingin tahu penjelasan selengkapnya, kah? Okay, tak usah pakai lama, langsung simak pembahasan detailnya yuk tentang Ketahui Apa Itu Tailwind CSS dan Perbedaan antara Tailwind dengan Bootstrap

Apa Itu Tailwind CSS?

Tailwind CSS adalah salah satu framework CSS dengan berbasis utility-first yang bertujuan untuk membangun user interface dari sebuah website. Membuat performa dalam membangun user interface dapat lebih mudah dan cepat dengan teknologi utility-first.

Pengembangan Tailwind dimulai pada tahun 2017 dan framework ini pertama kali diperkenalkan ke publik pada bulan Oktober 2017 melalui sebuah blog post di website Medium oleh Adam Wathan. Jadi, framework ini masih sangat baru namun popularitasnya sudah melejit di kalangan front-end developer.

Nah, dari tahun 2017 hingga saat ini, versi terbaru terus lahir untuk dapat memperbaiki dan mengembangkan komponen-komponen agar lebih optimal.

Framework Tailwind CSS ini merupakan software open-source gratis yang dapat digunakan oleh para developer untuk membangun sebuah user interface atau hanya digunakan untuk belajar.

Konsep Utility First pada Tailwind CSS

Konsep yang digunakan oleh Tailwind CSS adalah menggunakan utility-first yang dapat mempercepat dan memudahkan sebuah user interface dibangun.

Sebenarnya konsep utility first pada Tailwind CSS apa sih? Jadi, pengembang menggunakan kelas utilitas tingkat rendah (low-level) langsung di HTML untuk menerapkan gaya dan tata letak. Hal ini berbeda dari pendekatan tradisional, yang mana pengembang membuat aturan CSS khusus untuk setiap elemen.

Keunggulan dari Tailwind adalah framework ini mengutamakan utilitas untuk membuat desain yang unik atau spesifik. Tailwind tidak memberikan style ataupun template tertentu.

Namun, Tailwind memiliki metode opinionated building blocks yang dikenal sebagai kelas utilitas untuk membantu mengatur style komponen website lebih sederhana.

Jadi, pada Tailwind CSS hanya perlu menggabungkan detail-detail komponen yang sering digunakan lalu digabungkan. Alur dari Tailwind CSS adalah Tailwind akan mengambil raw-file dari CSS lalu memprosesnya melalui file konfigurasi, setelah itu menghasilkan output yang sudah dikonfigurasi sebelumnya.

Apa Perbedaan Tailwind dan Bootstrap?

Berikut ini perbedaan Tailwind dan Bootstrap yang bisa dijadikan pertimbangan dalam memilih sebuah framework:

Dapat dilihat bahwa perbedaan yang paling menonjol terdapat pada metode desain yang digunakan.

Metode utility-first menjadi highlight dari Tailwind CSS yang dapat memberi dampak cukup besar bagi developer yang sebelumnya menggunakan Bootstrap dan ingin beralih ke Tailwind CSS.

Apakah Tailwind CSS Merupakan Suatu Framework?

Apakah Tailwind CSS merupakan suatu framework? Jawabannya adalah YES! Tailwind CSS hadir dalam bentuk framework yang dapat memudahkan dalam membangun user interface di sebuah website.

Tailwind CSS dapat disebut sebagai sebuah framework karena menyediakan struktur dan seperangkat alat untuk membangun dan merancang user interface pada pengembangan web.

Contoh Tailwind CSS

Agar lebih memahami, kalian harus memulai dengan mempelajari pendekatan utility-first yang akan diterapkan pada framework Tailwind CSS. Kalian bisa mulai dari contoh di bawah ini dan selanjutnya harus berlatih melakukan kustomisasi menggunakan pendekatan utility-first ini.

Berikut merupakan contoh dari Tailwind CSS :

<!DOCTYPE html>

<head>

<title>Belajar Tailwind CSS</title>

</head>

Click Me

</button>

</body>

</html>

Contoh di atas akan menampilkan web sederhana yang memiliki button atau tombol. Berikut ini penjabaran lebih detailnya:

bg-gray-100: Memberikan latar belakang berwarna abu-abu pada elemen body atau bagian isi website
h-screen: Memberikan kustomisasi tinggi elemen body setara dengan tinggi layar.
flex items-center justify-center: Menggunakan flexbox untuk meletakkan elemen body secara vertikal maupun horisontal.
bg-black-500: Memberikan latar belakang button dengan warna hitam.
hover:bg-black-700: Menentukan warna latar belakang button saat melakukan hover.
text-white: Mendeklarasikan warna putih untuk font yang ada dalam button.
font-bold: Menebalkan font.
py-2 px-4: Memberikan padding pada sumbu y (py) sebesar 2 dan pada sumbu x (px) sebesar 4.
rounded: Memberikan sudut yang melengkung pada button.

Penggunaan Tailwind CSS ini dianggap lebih sederhana dan mudah oleh sebagian developer karena tak perlu lagi menuliskan lebih banyak baris kode untuk melakukan kustomisasi pada user interface website.

Jadi, kalian sudah punya ketertarikan kah untuk belajar Tailwind CSS?