⚠

Disclaimer: tutorial series ini akan lebih mudah apabila dibaca oleh orang yang setidaknya pernah belajar CSS atau pernah menggunakan bootstrap. Kebingungan memahami materi yang kamu baca akibat tidak paham dasar CSS, maka resikonya ditanggung sendiri 😆

Overview

Untuk memulai hari ini sambil menunggu imsak, saya memutuskan untuk menulis series ini, Tailwind for Backend Devs. Harapannya adalah anak Backend gak lagi takut sama CSS serta bisa paham hal-hal dasar di Tailwind. Mengingat ada banyak sekali hal yang ada di tailwind nampaknya gak semua juga diperlukan oleh backend, namun tetap saja ada hal-hal yang bisa kita baca pada dokumentasi tailwind itu sendiri.

Kita akan memulai dari hal dasar, kenapa tailwind? Sebenarnya, untuk anak backend Bootstrap itu sudah sangat cukup. Hal ini karena Bootstrap merupakan Framework CSS berbasis UI Component dimana untuk membangun sebuah card saja kita cukup memanggil kode seperti ini:

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

So simple bukan? Masalahnya adalah, tidak semua hal akan baik diselesaikan dengan bootstrap.

Kok gitu bang? Kenapa emangnya sama bootstrap?

Bootstrap merupakan Framework UI Components, artinya semua component memang sudah disediakan secara default. Namun, untuk hal-hal yang sifatnya customizeable atau mau di-desain sendiri Bootstrap ini sangat tidak ramah, artinya kita harus melakukan kode terhadap CSS Vanilla atau Plain CSS.

Eww, who wants to code in CSS Vanilla? Only nerd Frontend will do that 😝 (just kiddin). Anyway ini contoh customizeable desain.

src: https://dribbble.com/shots/16262712-Employoo-App-Design-System-UI-Components

Nah desain seperti ini paling enak dan lebih mudah dilakukan dengan Tailwind bukan dengan Bootstrap. Kenapa? Karena simplenya Bootstrap itu Framework UI Components sedangkan Tailwind itu Library CSS. Artinya, Tailwind adalah bunch of CSS Classes yang bisa digunakan oleh Backend Developer untuk membuat tampilan seperti gambar di atas.

Lagian, ngapain sih backend developer mau bikin tampilan kaya gini? Ya emangnya semua backend developer pasti ngoding API doang? Ada momen backend developer yang tetiba ngerangkap jadi Web Developer, artinya mereka juga harus melakukan slicing template, buatin view, dan coding tampilan HTML.

Imagine kalo backend developer dipaksa untuk ngoding Vanilla CSS?

Bisa, tapi mati.

Kickstart Tailwind

Okelah daripada basa-basi kita langsung mulai aja, btw biar kalian gak bingung ada dua versi yang harus dipahami. Jadi tailwind itu ada versi 2 dan versi 3, bedanya apa?

Ya simplenya di penamaan class librarynya antara versi 2 dan 3 beda, jelas di versi 3 ada penambahan-penambahan misalnya dari warna.
Versi 3 harus di-compile, artinya kita harus pakai NPM.
Versi 2 ada versi CDN, versi 3 tidak ada, artinya kita gak bisa pakai secara online.

Nah ingat, kita disini mau ngapain? Yes, belajar. Apabila mau belajar maka jangan pakai yang ribet dulu, so udah tau jawabannya kita pakai versi berapa?

Ya versi 2 lah! 😂

Pada tutorial series ini, kita akan menggunakan versi CDN yaitu 2.2.19. Sekarang pergilah ke environment kesenangan kalian, mau codepen dan sejenisnya terserah kalian. Kalau saya cukup pakai my lovely VS Code. Buat file index.html lalu masukkan kode di bawah.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Tailwind</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto p-4">
        <h1 class="text-3xl font-bold text-center">Hello, Tailwind!</h1>
        <p class="text-lg text-center mt-4">This is a simple boilerplate with Tailwind CSS CDN.</p>
    </div>
</body>
</html>

Apabila kalian buka dengan browser kalian melalui file index.html atau kalian show preview pada VSCode, hasilnya akan kurang lebih seperti ini.

Sangat simple sekali ya nggak?

💡

Untuk menggunakan live preview dengan VSCode, klik kanan pada file lalu klik show preview, copy URLnya ke browser dan tampilkan pada layar secara full.

Sekarang kita bedah dulu code dasarnya.

Bedah Code

Pada bagian body, kita menggunakan class bg-gray-100, artinya kita mengganti background tailwind dengan gray dengan tingkat ketebalan 100 (semakin tinggi semakin gelap). Kerennya tailwind adalah semua class sangat human readable, artinya kita aja bisa menggunakan akal kita bahwa bg artinya background, bukan bang, "misi bg sy mw lewat", nggak gini. Kalian bisa ganti warna-warna dengan melihat bagian ini.

Kemudian, kita menggunakan container. Saya rasa bagi yang pernah menggunakan bootstrap, pasti gak asing dengan istilah container. Ya, kalau di bootstrap, class container otomatis membuat layout menjadi ke tengah, tapi beda dengan tailwind. Pada tailwind, container tidak otomatis membuat konten ke bagian tengah, namun container digunakan untuk membuat wadah (container) yang memiliki padding yang responsif terhadap ukuran layar. Inilah bedanya antara bootstrap dengan tailwind.

Tailwind cenderung lebih ribet karena kita bisa freestyle, artinya kita bisa menyesuaikan kebutuhan kita, kalau bootstrap karena UI Components maka sudah otomatis mengikuti bawaan framework.

Apa yang membuatnya ke tengah? Jawabannya class mx-auto. Kamu bisa merubah kodenya sedikit menjadi seperti ini:

<div class="container p-4 border-2 border-black">

💡

Class border-2 border-black adalah class yang dapat memberikan kamu penglihatan layout secara jelas, kamu dapat menghapusnya setelah tidak digunakan, ini hanya trik saja biar keliatan lebih jelas.

Kalau kamu hilangkan mx-auto sekarang akan menjadi seperti ini:

Artinya class mx-auto sangat berperan penting untuk membuat objek ke tengah. So, kalo kalian lupa gimana cara nengahin objek, inget aja kata kuncinya auto.

Kemudian p-4 artinya padding, saya rasa saya tidak perlu jelasin lagi ya?

<h1 class="text-3xl font-bold text-center">Hello, Tailwind!</h1>
<p class="text-lg text-center mt-4">This is a simple boilerplate with Tailwind CSS CDN.</p>

Terakhir, kita bahas text. Uniknya pada tailwind tidak begitu mengenal istilah tag text, artinya kamu bahkan bisa menggunakan tag paragraph dengan style yang diatur dan tetap mendapatkan hasil yang sama besarnya seperti h1. Kalau kamu membaca docsnya, kita dapat dengan mudah merubah style tag paragraph atau apapun dengan ukuran yang kita mau, jadi mau h1, h2, h3, atau p sekalipun, gak ngaruh ya ges.

Kemudian kita bisa mengatur font align dengan mudah, baca docsnya disini. Pada kode di atas kita menggunakan text-center, sangat ramah dipahami, bukan? Even kalian gak buka docsnya, kita pasti sama-sama sepakat bahwa fungsi class ini pasti untuk membuat posisi teksnya menjadi ke tengah 😀.

Terakhir mt-4, mt artinya margin top harusnya saya juga gak usah jelasin lagi ya kenapa dikasih margin, cobain aja sendiri dihapus.

Sekian untuk part-1, kalau ramai lanjut part-2 ya ges.