Instalasi

Terdapat beberapa cara untuk menginstal Tailwind ke dalam proyek web sesuai dengan framework yang kita gunakan. Namun, anggap saja sekarang kita menggunakan HTML polos tanpa menggunakan framework apapun. Untuk menginstalnya, kita dapat menggunakan Tailwind CLI, PostCSS, atau melalui CDN. Perbedaannya sebagai berikut:

• Tailwind CLI: sebuah program standalone yang memungkinkan kita untuk menggunakan Tailwind tanpa build tool apapun.
• PostCSS: kita dapat menginstal Tailwind sebagai plugin PostCSS dan mengintegrasikannya dengan alat-alat seperti Webpack atau Vite, misalnya.
• CDN: bila kita hendak melakukan prototyping atau sekadar mencoba-coba Tailwind saja, CDN cocok untuk digunakan.

Di luar dari opsi yang disebutkan, kita dapat menggunakan Tailwind di framework yang mungkin biasa kita gunakan, seperti Next, React Router, Laravel, dan masih banyak lagi. Untuk materi belajar ini, kamu dapat menggunakan Code Playground di setiap pelajaran atau menggunakan Tailwind CLI untuk opsi menyiapan di lokal komputer kamu.

Code Playground

Agar pengalaman belajar lebih mudah, saya menyiapkan sebuah komponen interaktif Code Playground untuk menunjukkan demo dari kode yang ditampilkan.

Contohnya seperti ini:

Selain bisa melihat hasil dari kode, kamu juga bisa mengubah-ubah kode di dalam Code Playground!

Penyiapan Lokal

Apabila kamu ingin langsung mencoba menggunakan Tailwind di komputer lokal kamu, ikuti langkah-langkah berikut untuk melakukan penyiapan proyeknya.

Syarat-Syarat

Sebelum menginstal Tailwind, kita memerlukan Node.js untuk membuatnya berjalan. Dokumentasi Tailwind tidak memberikan informasi terkait versi spesifiknya, namun, saya menggunakan Node.js versi 22. Selain itu juga kita akan menggunakan pnpm sebagai alternatif dari npm untuk penggunaan ruang penyimpanan yang lebih efisien.

Instalasi Node.js

Untuk menginstal Node.js, silahkan pergi ke halaman resmi Node.js (https://nodejs.org/en/download). Di halaman tersebut kita dapat memilih versi dan sistem operasi yang digunakan. Saya tidak akan terlalu spesifik di bagian ini, karena proses instalasi masing-masing sistem operasi berbeda-beda.

Intalasi pnpm

Untuk menginsal pnpm, kita dapat menggunakan npm untuk melakukannya. Gunakan perintah berikut untuk menginstal pnpm secara global:

npm i -g pnpm

Kita sudah siap untuk lanjut ke tahap berikutnya, yaitu membuat proyek Tailwind dan menginstal Tailwind CLI di dalamnya.

Instalasi Tailwind

Pertama-tama, mari buat sebuah direktori baru kosong dengan nama, misal, tailwind:

mkdir tailwind

Sekarang kita dapat masuk ke direktori tersebut:

cd tailwind

Buat sebuah fail package.json dengan perintah pnpm:

pnpm init

Hasil dari perintah tersebut kira-kira seperti ini:

PS F:\tutorial\tailwind> pnpm init
Wrote to F:\tutorial\tailwind\package.json

{
  "name": "tailwind",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "packageManager": "pnpm@10.12.2"
}

Sekarang kita instal Tailwind dengan pnpm:

pnpm install tailwindcss @tailwindcss/cli

Setelah itu, kita perlu membuat sebuah fail CSS dengan nama, misal, style.css:

@import "tailwindcss";

Fail di atas digunakan sebagai input yang akan nantinya diproses oleh Tailwind CLI. Fail tersebut juga bukan fail CSS standar yang bisa dimengerti oleh browser. Untuk itu, kita perlu memprosesnya dengan Tailwind CLI seperti ini:

npx @tailwindcss/cli -i style.css -o output.css

Penjelasan perintah di atas:

• npx merupakan sebuah package runner dari Node.js yang tugasnya adalah menjalankan program atau package npm
• @tailwindcss/cli merupakan nama dari package Tailwind CLI
• -i style.css merupakan flag untuk menentukan fail CSS yang akan diproses, dalam hal ini fail yang akan diproses adalah style.css
• -o output.css merupakan flag untuk menentukan nama dan lokasi hasil fail akan ditaruh, dalam hal ini nama failnya adalah output.css

Setelah prosesnya selesai, maka akan muncul sebuah fail output.css yang isinya kira-kira seperti ini:

Fail tersebut berisi beberapa bagian:

• theme berisi custom properties atau variable yang nantinya digunakan bagian yang lain dari Tailwind
• base merupakan style untuk me-reset style bawaan browser, mirip seperti normalize.css atau reboot.css pada Bootstrap
• components berisi style yang nantinya kita buat, secara bawaan Tailwind tidak memiliki style apapun untuk bagian components
• utilities berisi style atau class-class kecil yang kita gunakan, seperti p-10, bg-blue-500, transition, dan sebagainya

Untuk saat ini, fail tersebut hanya berisi bagian theme dan base saja. Saat kita sudah mulai menggunakan class-class Tailwind, nantinya fail tersbut akan dipenuhi dengan style untuk class-class yang kita gunakan tersebut.

Menyiapkan HTML

Sejauh ini kita hanya memiliki fail CSS saja, sekarang saatnya menyiapkan HTML yang akan kita gunakan sebagai ruang kerja atau ruang belajar Tailwind kita.

Mari buat sebuah fail dengan nama index.html dengan isian berikut:

<!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 class="text-5xl font-bold">
    Belajar Tailwind
  </h1>
</body>
</html>

Untuk menjalankan HTML tersebut, kita dapat langsung menariknya ke browser.

Lihat kembali fail HTML di atas, kita menggunakan text-5xl dan font-bold. Keduanya adalah class Tailwind. text-5xl untuk membuat teks menjadi besar dan font-bold untuk membuat teks menjadi bold.

Kalau kita lihat hasil dari HTML tersebut di browser, teks <h1> tidak menjadi besar maupun menjadi bold. Ini karena kita membuat fail output.css sebelum kita membuat HTML-nya, sehingga Tailwind belum tahu kalau kita menggunakan class-class apa saja.

Untuk itu, kita perlu menjalankan Tailwind CLI lagi untuk memperbarui fail output.css agar berisi style untuk class-class Tailwind yang kita gunakan tersebut.

npx @tailwindcss/cli -i style.css -o output.css

Sekarang kalau kita buka kembali HTML di browser, hasilnya sudah terlihat sesuai dengan yang kita inginkan.

Jadi, seperti itu, Tailwind akan men-generate style untuk class-class Tailwind yang kita gunakan saja. Tentu saja, ini lebih efisien dibanding men-generate seluruh style untuk semua class yang dimiliki oleh Tailwind.

Secara bawaan, cara Tailwind mengetahui class-class yang kita gunakan adalah dengan memindai setiap fail yang ada di dalam direktori saat kita menjalankan Tailwind CLI, kecuali:

• Fail-fail yang terdaftar di dalam fail .gitignore
• Fail-fail di dalam direktori node_modules
• Fail-fail binari seperti gambar, video, atau fail zip
• Fail-fail CSS
• Fail-fail lock dari package manager yang umum

Untuk menghindari menjalankan perintah Tailwind CLI setiap kali kita menggunakan class-class Tailwind yang lain, kita dapat menambahkan flag --watch di akhir perintah sebelumnya:

npx @tailwindcss/cli -i style.css -o output.css --watch

Dengan demikian, ketika kita membuat perubahan pada fail, misal, index.html, Tailwind CLI akan otomatis mendeteksinya dan memproses ulang fail style.css.

Sejauh ini kita sudah memiliki sebuah proyek Tailwind yang akan digunakan untuk pelajaran Tailwind lainnya di materi belajar ini!