Ketahui Apa Itu Tailwind CSS dan Perbedaan antara Tailwind dengan Bootstrap

Table of Contents−

• Apa Itu Tailwind CSS?
• Konsep Utility First pada Tailwind CSS 
• Apa Perbedaan Tailwind dan Bootstrap?
• Apakah Tailwind CSS Merupakan Suatu Framework?
• Contoh Tailwind CSS

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 nan bermaksud untuk membangun user interface dari sebuah website. Membuat performa dalam membangun user interface dapat lebih mudah dan sigap 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 tetap sangat baru namun popularitasnya sudah melejit di kalangan front-end developer.

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

Framework Tailwind CSS ini merupakan software open-source cuma-cuma nan dapat digunakan oleh para developer untuk membangun sebuah user interface namalain hanya digunakan untuk belajar.

Konsep Utility First pada Tailwind CSS 

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

Sebenarnya konsep utility first pada Tailwind CSS apa sih? Jadi, developer menggunakan kelas utilitas tingkat rendah (low-level) langsung di HTML untuk menerapkan style dan tata letak. Hal ini berbeda dari pendekatan tradisional, nan mana developer membikin patokan CSS unik untuk setiap elemen. 

Keunggulan dari Tailwind adalah framework ini mengutamakan utilitas untuk membikin kreasi nan unik namalain spesifik. Tailwind tidak memberikan style ataupun template tertentu.

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

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

Apa Perbedaan Tailwind dan Bootstrap?

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

Dapat dilihat bahwa perbedaan nan paling menonjol terdapat pada metode kreasi nan digunakan.

Metode utility-first menjadi highlight dari Tailwind CSS nan dapat memberi akibat cukup besar bagi developer yang sebelumnya menggunakan Bootstrap dan mau beranjak ke Tailwind CSS.

Apakah Tailwind CSS Merupakan Suatu Framework?

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

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

Contoh Tailwind CSS

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

Berikut merupakan contoh dari Tailwind CSS :

<!DOCTYPE html>

<html lang=”en”>

<head>

 <meta charset=”UTF-8″>

 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

 <script src=”https://cdn.Tailwindcss.com”></script>

 <title>Belajar Tailwind CSS</title>

</head>

<body class=”bg-gray-100 h-screen flex items-center justify-center”>

 <button class=”bg-black-500 hover:bg-black-700 text-white font-bold py-2 px-4 rounded”>

 Click Me

 </button>

</body>

</html>

Contoh di atas bakal menampilkan web sederhana nan mempunyai button namalain tombol. Berikut ini penjabaran lebih detailnya:

1. bg-gray-100: Memberikan latar belakang berwarna abu-abu pada komponen body atau bagian isi website
2. h-screen: Memberikan kustomisasi tinggi komponen body setara dengan tinggi layar.
3. flex items-center justify-center: Menggunakan flexbox untuk meletakkan komponen body secara vertikal maupun horisontal.
4. bg-black-500: Memberikan latar belakang button dengan warna hitam.
5. hover:bg-black-700: Menentukan warna latar belakang button saat melakukan hover.
6. text-white: Mendeklarasikan warna putih untuk font yang ada dalam button.
7. font-bold: Menebalkan font.
8. py-2 px-4: Memberikan padding pada sumbu y (py) sebesar 2 dan pada sumbu x (px) sebesar 4.
9. rounded: Memberikan perspektif nan 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 kesukaan kah untuk belajar Tailwind CSS?