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:
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.
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!
Apabila kamu ingin langsung mencoba menggunakan Tailwind di komputer lokal kamu, ikuti langkah-langkah berikut untuk melakukan penyiapan proyeknya.
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.
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.
Untuk menginsal pnpm, kita dapat menggunakan npm untuk melakukannya. Gunakan perintah berikut untuk menginstal pnpm secara global:
Kita sudah siap untuk lanjut ke tahap berikutnya, yaitu membuat proyek Tailwind dan menginstal Tailwind CLI di dalamnya.
Pertama-tama, mari buat sebuah direktori baru kosong dengan nama, misal, tailwind:
Sekarang kita dapat masuk ke direktori tersebut:
Buat sebuah fail package.json dengan perintah pnpm:
Hasil dari perintah tersebut kira-kira seperti ini:
Sekarang kita instal Tailwind dengan pnpm:
Setelah itu, kita perlu membuat sebuah fail CSS dengan nama, misal, style.css:
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:
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.cssSetelah 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 Tailwindbase merupakan style untuk me-reset style bawaan browser, mirip seperti normalize.css atau reboot.css pada Bootstrapcomponents berisi style yang nantinya kita buat, secara bawaan Tailwind tidak memiliki style apapun untuk bagian componentsutilities berisi style atau class-class kecil yang kita gunakan, seperti p-10, bg-blue-500, transition, dan sebagainyaUntuk 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.
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:
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.
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:
Untuk menghindari menjalankan perintah Tailwind CLI setiap kali kita menggunakan class-class Tailwind yang lain, kita dapat menambahkan flag --watch di akhir perintah sebelumnya:
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!
Jadilah yang pertama untuk berdiskusi!