Bagi saya, untuk menggunakan Tailwind kita harus memahami CSS terlebih dahulu. Karena berbeda dengan Bootstrap yang mana kita bisa langsung membuat suatu elemen dengan mudah menggunakan class class pada Bootstrap. Tapi tidak di Tailwind karena Tailwind adalah Utility-first framework, kita harus merangkai class class untuk membuat suatu elemen dengan menggunakan class class Utility. Apa itu Utility-first? Anda bisa membaca konsep Utility-first pada Tailwind CSS.
Untuk menggunakan framework Tailwind CSS ini kita bisa menggunakan 2 cara, yaitu dengan CDN atau Tailwind CLI. Disini saya akan memberikan tutorial untuk keduanya.
1. CDN
Untuk CDN caranya sangat mudah, kita hanya perlu menambahkan kode dibawa pada codingan kita
<script src="https://cdn.tailwindcss.com"></script>
Setelah itu kita bisa langsung menggunakan class class yang ada pada Tailwind. Contoh
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>Kalian bisa membaca Dokumentasi Tailwind untuk melihat class class yang bisa dipakai.
2. Tailwind CLI
Cara kedua dengan menggunakan Tailwind CLI. Sesuai namanya CLI tentu kita membutuhkan terminal untuk meng-install nya, karena saya menggunakan Android jadi saya menggunakan Termux untuk instalasinya. Sebelum meng-install Tailwind, kita harus meng-install Node JS terlebih dahulu.
Ketikkan command berikut pada termux
$pkg install nodejs
Tunggu proses instalasinya selesai. Selanjutnya kita inisialisasi dengan mengetikkan command
$npm init -y
maka kita akan dibuatkan file package.json
$npm install -D tailwindcss
Jika sudah ketik command berikut untuk menginsialisasi Tailwind
$npx tailwindcss init
Maka kita akan dibuatkan file config untuk mengkonfigurasi Tailwind kita
Selanjutnya kita akan mengkonfigurasi file confignya. Buka code editor dan buka tailwind.config.js
Kita fokus pada content, kita akan mengkonfigurasi path/lokasi dari file template kita yaitu file html atau file javascript yg nanti kita kasih class class Tailwind. jika kita lihat confignya pada Dokumentasi Tailwind, bagian content diisi dengan
"./src/**/*.{html,js}"Mari kita lihat, src adalah folder tempat kita menyimpan file html js yg akan diberikan class Tailwind, dan ** adalah untuk meng-include semua folder yang ada didalamnya dan, *.{html,js} adalah untuk meng-include semua file dengan ekstensi html dan javascript yang ada pada folder src.
Kalian bisa edit jika ingin mengubah nama foldernya dan jangan lupa sesuaikan nama folder template kalian dengan config. Disini karena saya hanya mengetest Tailwind di Android jadi saya akan ubah path nya menjadi index.html saja dengan mengedit pada bagian content menjadi
"./index.html"
Menambahkan Tailwind Directives
Setelah selesai mengkonfigurasi Tailwind kita, kita akan menambahkan Tailwind directives untuk menjalankan Tailwind nya. dengan cara membuat file css dan isi code berikut
@tailwind base; @tailwind components; @tailwind utilities;
Memulai build process
Setelah semuanya selesai kita tinggal memulai build process untuk create file Tailwind yang akan kita pakai. Ketikkan command
$npx tailwindcss -i ./input.css -o ./output.css --watch
Command diatas untuk build file output.css yang akan kita pakai, dan otomatis rebuild file tersebut jika ada perubahan class pada desain kita. input.css adalah file dari directives yang tadi sudah kita buat, dan output.css adalah file yang akan kia pakai pada desain atau template kita. Nama file input.css dan output.css bisa diubah sesuka kalian.
"watch": "npx tailwindcss -i ./input.css -o ./output.css --watch"
$npm run watch
Dengan begitu kita sudah bisa menggunakan class class Tailwind pada desain atau template kita :D. Mari kita test. Buat file index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="output.css" rel="stylesheet">
</head>
<body>
<h1>
Hello world!
</h1>
</body>
</html>
Sesuaikan link href dengan nama dan tempat kalian menyimpan file output tadi.
Saya akan coba mengubah warna teks Hello World menjadi warna lime dengan text decoration underline berwarna pink
<h1 class="text-lime-500 underline decoration-pink-400"> Hello world! </h1>
Sekian tutorial dari saya, maaf bila ada kata kata yang sulit dimengerti. Terimakasih sudah mau mampir.
