Tailwind CSS merupakan framework CSS yang berbasis utility untuk membuat UI atau tampilan dari aplikasi web. Berbasis utility artinya Tailwind cuma terdiri dari 100% utility class dan tidak ada class komponen seperti Navbar, Button, Card, Modal, dan lain-lain. Komponen-komponen ini kita buat sendiri dengan class utility.
Sebagai contoh, ketika kita ingin membuat komponen Button, maka kita bisa gunakan beberapa kelas utility untuk button seperti class background, border, color, dan sebagainya.
Mungkin pada awalnya kita akan merasa ribet, tidak seperti Bootstrap yang sudah punya class komponen dan bisa langsung pakai. Setelah mencoba Tailwind akan terasa nyamannya.
Tailwind CSS pertama kali dikembangkan oleh Adam Wathan di tahun 2017, rilis versi 1.0 di tahun 2019. Versi tailwind saat ini adalah versi 3.12.4. Jika tertarik untuk melihat sejarah perubahan dari versi ke versi, kita bisa baca CHANGELOG di Github.
Tailwind CSS mempunyai beberapa kelebihan jika dibandingkan dengan framework CSS lainnya, yang pertama dengan Tailwind CSS kita bisa bebas kustomisasi komponennya. Kedua, kode CSS dari komponen yang tidak dipakai akan tidak akan ikut nyangkut di CSS hasil build, hal ini membuat ukuran CSS-nya jadi lebih kecil.
Hasil build kode CSS tailwind hanya akan menambahkan class-class yang dipakai saja. Kalau class-nya tidak dipakai, tidak akan ditambahkan. Ini yang membuat hasil build CSS Tailwind lebih kecil dibandingkan Bootstrap, Bulma, Materialize, dan lain-lain.
Persiapan Alat untuk Belajar Tailwind
Ada tiga alat yang kita butuhkan untuk coding Tailwind :
- Teks Editor
- Web browser
- Nodejs
Nodejs dipakai buat menginstal Tailwind CSS dan juga beberapa modul yang diperlukan. Jika belum menginstal Nodejs, silakan baca pada Tutorial Nodejs.
Kemudian untuk text editor bebas, bisa pakai yang mana aja, sesuai dengan selera masing-masing. Biasanya teks editor yang dipakai adalah:
- Visual Studio Code
- Sublime Text
- Atom
- Web storm
- Dan lain-lain
Pada tutorial ini akan menggunakan text editor Visual Studio Code, karena fitur dan extensions yang diinstall dapat mempermudah proses development.
Pada Visual Studio Code kita bisa install extension Tailwind IntelliSense buat mempermudah saat kita kurang ingat dengan nama-nama class.
Membuat Project Tailwind
Ada dua cara yang bisa dilakukan untuk menggunakan Tailwind di dalam project:
- Menggunakan link CDN
- Menggunakan NPM dari Nodejs
1. Menggunakan Tailwind dari CDN
Menggunakan Tailwind dari CDN tidak direkomendasikan untuk dipakai di production, karena kita tidak akan dapat hasil build CSS yang optimal. Tapi jika hanya untuk belajar Tailwind dan coba-coba, dipersilahkan.
Berikut cara menggunakan Tailwind dari CDN, yang pertama siapkan dulu file atau kode HTML, kemudian di dalam tag <head> tambahkan link CSS dengan alamat CDN Tailwind.
Buat file HTML, misal dengan nama tailwind-cdn.html kemudian isi dengan kode berikut :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Coba Tailwind dari CDN</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body> </html>
Setelah itu, buka dengan web browser, dan hasilnya seperti berikut :
2. Membuat Project Tailwind dengan NPM
Pertama kita siapkan dulu folder baru untuk project. Pada terminal gunakan perintah :
mkdir belajar_tailwind
Atau silahkan buat foledernya dengan cara manual melaui windows exploler. Setelah itu, masuk ke dalam folder yang sudah dibuat tadi dengan perintah
cd belajar_tailwind
Kemudian kita harus melakukan inisialisasi atau persiapan awal dengan NPM di dalam folder ini, jalankan perintah :
npm init
Kemudian isi dengan data project, jika tidak mau diubah biarkan saja kosong dengan menekan enter.
Perintah ini akan membuat file baru bernama package.json yang berisi metadata project seperti (package name, version, description, author).
Selanjutnya kita akan menginstall tailwind css menggunakan npm. Jalankan perintah ini di Terminal atau CMD :
npm install tailwindcss
Tunggu sampai proses instalasinya selesai, setelah itu lanjutkan membuat file konfigurasi tailwind, jalankan perintah :
npx tailwindcss init
Perintah ini akan membuat file baru bernama tailwind.config.js. File ini berisi konfigurasi yang dibutuhkan Tailwind.
Berikut tampilan dari project setelah melakukan proses instalasi tailwind.
Kemudian, kita akan melakukan konfigurasi path konten pada file tailwind.config.js
Be the first to comment