Pengenalan

Mungkin anda yang sering bekerja dari sisi frontend sudah lumrah dengan framework Bootstrap. Namun anda yang ingin lebih bisa mencustomisasi lebih jauh, cocok untuk mengenal Tailwind. Secara umum mungkin Tailwind memiliki kemiripan dengan bootstrap, yaitu sama-sama sebuah package css yang berisi class-class style yang dapat kita pergunakan dalam membuat tampilan. Namun dari segi konsep Tailwind dan Bootstrap memiliki perbedaan yang sangat besar.

Bootstrap merupakan framework css yang merupakan ui kit seperti Bulma dan Foundation. Sedangkan Tailwind merupakan sekumpulan class-class helper yang dapat kita apply ke element html. Tailwind tidak memiliki tema tertentu layaknya Bootstrap.

Sebagai contoh apabila di Bootstrap, ketika anda membuat sebuah tombol anda dapat memanggil class dari button tersebut

<button class="btn btn-primary">Tombol Saya</button>

Yang akan menghasilkan tombol layaknya seperti berikut ini

https://codepen.io/adisparta/pen/oNGjwLN

Sedangkan apabila pada Tailwind, anda tidak akan memiliki class yang instant seperti class pada Bootstrap. Anda harus mendefinisikan properti class yang akan anda pergunakan.

<button class="bg-blue-500 text-white px-4 py-3 rounded cursor-pointer">Tombol Saya</button>

https://codepen.io/adisparta/pen/LYzpLbY

Dari contoh diatas, saya membuat satu button sederhana. Selanjutnya, ingin memberikan padding horizontal dan vertical pada button, sehingga saya memberikannya class px-4 py-3. Saya juga ingin agar warna backgroundnya adalah biru dengan tulisan putih yang dapat dilakukan dengan memberi class bg-blue-500 dan text-white.

Dari simulasi ini, dapat disimpulkan bahwa pada Tailwind kita harus membuilt component kita dari tiap sisi. Baik dari padding, warna, dan lain-lain dimana class-class tersebut sudah dipersiapkan oleh Tailwind.

Apakah Tailwind lebih atau lebih buruk dari Bootstrap?

Apabila bertanya mengenai mana yang lebih baik, jawabanya tergantung dari kegunaan dan kembali lagi ke masing-masing pengembang. Kalau dilihat dari urgensi, Bootstrap cocok dipergunakan apabila project tersebut harus kita kembangkan dengan deadline yang cepat. Namun apabila kita diminta untuk membuatkan website yang memang mengutamakan keindahan dan custom tampilan, anda lebih baik mencoba menggunakan Tailwind. Bukan berarti bootstrap tidak dapat dicustom, kita dapat melakukannya dengan meng-override class pada bootstrap untuk melakukan kustomisasi.

Saya pribadi lebih suka menggunakan Tailwind. Tetapi tidak menutup kemungkinan untuk menggunakan Bootstrap pada project saya. Tailwind memberikan kita keleluasaan untuk membuild dan mengkustom tiap component dari tampilan yang kita miliki. Sedangkan bootstrap sudah menyediakan semua component yang kita perlukan untuk membangun sebuah website.

Installasi

Baiklah, cukup untuk pembahasan mengenai Bootstrap dan Tailwind. Kita akan fokus kembali untuk melanjutkan perkenalan kita dengan Tailwind. Tahap awal yang dapat kita lakukan anda melakukan installasi Tailwind. Ada beberapa cara yang dapat kita lakukan, anda dapat mengikuti salah satu cara yang sesuai. Tailwind sendiri sudah mensupport beberapa framework yang lumrah dipergunkan. Mulai dari React, Vue, Laravel, dan lain-lain.

Apabila anda tidak menggunakan framework diatas, anda dapat menginstall langsung menggunakan npm

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Setelah anda menginstall tailwind, anda dapat mengkustom konfigurasi Tailwind.

npx tailwindcss init

Perintah diatas akan menggerenate file config yang dapat anda ubah-ubah sesuka

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Tailwind secara default memiliki configurasi seperti warna, font, ukuran dan lain-lain. Nah apabila anda ingin mengganti config default dari Tailwind, anda dapat lakukan pada file ini dan membuild ulang Tailwind.

Untuk anda yang tidak menggunakan npm, anda juga langsung menyertakan Tailwind pada html dengan menggunakan CDN berikut

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Kekurangan dari penggunaan CDN, anda tidak dapat melakukan custom pada config default Tailwind. Namun apabila anda ingin mengubahnya, anda tetap dapat mengoveride styling tersebut. Pada contoh kali ini, saya akan menggunakan asset yang bersumber dari CDN langsung.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Judul</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

Apabila dijalankan, code tersebut akan menampilkan tulisan sebagai berikut:

Styling Color pada Tailwind

Setelah membuat project baru Tailwind, mari kita mencoba beberapa class yang disediakan. Saya akan mulai dari coloring. Tailwind telah menyediakan beberapa color palette dari warna muda sampai tua. Warna yang secara default disediakan adalah gray, red, yellow, green, blue, indigo, purple, dan pink. Dan setiap warna tersebut memiliki level warna dari 50, 100 sampai 900 dengan nilai kelipatan 100.

Color pada tailwind dapat kita pergunakan sebagai warna untuk background maupun warna text. Berikut merupakan contoh penggunaan warna.

<h1 class="text-gray-500">Hello</h1>
<h1 class="text-red-700">Hello</h1>
<h1 class="text-purple-400">Hello</h1>
<h1 class="text-yellow-900">Hello</h1>

Format yang dipergunakan untuk pewarnaan tulisan adalah text-{warna}-{level}.

Atau apabila anda menggunakan warna background dapat anda tulis dengan format bg-{warna}-{level} yang akan menjadi seperti berikut:

<h1 class="bg-gray-500">Hello</h1>
<h1 class="bg-red-700">Hello</h1>
<h1 class="bg-indigo-600">Hello</h1>
<h1 class="bg-yellow-500">Hello</h1>

Pengaturan Ukuran Text

Ukuran text dalam Tailwind juga telah didefinisikan. Sampai saat artikel ini dibuat ukuran text yang tersedia disajikan dalam class-class : text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl, sampai text-9xl. Daftar ukurannya dapat anda lihat pada tabel https://tailwindcss.com/docs/font-size#class-reference.

<h1 class="text-sm text-gray-400">Hello</h1>
<h1 class="text-lg text-indigo-800">Hello</h1>
<h1 class="text-3xl text-red-500">Hello</h1>
<h1 class="text-4xl text-yellow-500">Hello</h1>

Ukuran Component

Format yang dapat anda pergunakan untuk mengatur ukuran dari segi tinggi dan lebar suatu component adalah dengan menggunakan h-{ukuran} dan w-{ukuran}. H digunakan untuk height atau tinggi, dan W atau width untuk lebar. Contohnya sebagai berikut:

<div class="h-4 w-6 bg-red-500 inline-block"></div>
<div class="h-10 w-8 bg-yellow-400 inline-block"></div>
<div class="h-10 w-10 bg-indigo-400 inline-block"></div>

Selain menggunakan ukuran angka, Tailwind juga menyediakan skala perbandingan dalam height dan width. Misalkan pada code dibawah ini.

<div class="h-10 w-1/2 bg-red-500 inline-block"></div>
<div class="h-10 w-1/3 bg-yellow-400 inline-block"></div>
<div class="h-10 w-2/3 bg-indigo-400 inline-block"></div>

Daftar ukuran tersebut dapat anda lihat lebih lengkap pada halaman https://tailwindcss.com/docs/width.

Responsive

Dalam tailwind juga menyediakan class untuk responsibilitas. Anda dapat memberikan perlakukan tertentu pada setiap break point. Break point yang disediakan Tailwind adalah sm, md, lg, xl, 2xl. Break point ini dikombinasikan dengan properti yang akan diatur sesuai keinginan. Contohnya, anda memiliki image dengan ukuran default w-16 dan ketika layar berikuran medium atau m, anda ingin ukuran image tersebut menjadi w-32 dan ketika ukuran layar menjadi besar atau lg akan diubah menjadi w-48.

Format dari penulisan breakpoint adalah dengan {breakpoint}:{properties}. Sehingga dari contoh ini akan menjadi

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">

https://codepen.io/adisparta/pen/Yzryaxq

Tips

Dari beberapa contoh diatas, tentunya ada pasti berfikir bahwa sangat merepotkan apabila harus mengingat class-class tersebut. Disini saya memberikan rekomendasi extensions yang dapat membantu anda. Untuk anda yang menggunakan Visual Studio Code anda hanya perlu memasang plugin Tailwind CSS IntelliSense.

Plugin ini sangat membantu ketika anda bekerja menggunakan Tailwind dengan memberikan anda bantuan autocomplete daftar class.

Apabila anda ingin melihat contoh component dari Tailwind, anda bisa mengunjungi halaman https://tailwindui.com/ dan https://tailwindcomponents.com/ yang secara langsung juga dapat anda gunakan.

Penutup

Mungkin hanya sekian yang dapat saya sampaikan untuk pengenalan Tailwind. Sebenarnya masih banyak sekali class-class dan utilitas yang belum saya bahas. Namun intinya, Tailwind dapat memberikan anda kemudahan dalam mengembangkan tampilan frontend dari suatu website. Apabila anda baru mencoba mempelajarinya, mungkin anda akan berfikir bahwa akan sangat merepotkan untuk menggunakan css ini dikarenakan anda perlu menggunakan banyak class. Tapi semakin lama menggunakannya anda akan merasa Tailwind sangat berguna dan full customable. Saya sendiri sudah beberapa kali menggunakan Tailwind, dan bahkan semenjak menggunakannya saya sangat jarang untuk membuat css tambahan. Btw, website ini juga saya kembangkan menggunakan Tailwind.

Apabila anda memiliki pertanyaan atau hal lainnya, anda bisa menuliskannya di kolom komentar dibawah atau dapat mengkontak saya langsung melalui halaman kontak diwebsite ini. Terimakasi.

Sumber

https://blog.logrocket.com/tailwind-css-vs-bootstrap-ui-kits/

https://www.makeuseof.com/tailwind-css-vs-bootstrap-which-is-a-better-framework/

https://tailwindcss.com/