Set Up Tailwind CSS di Project HTML Biasa

Sebenarnya di situs web Tailwind CSS sudah ada dokumentasi tentang beberapa cara untuk menginstal tailwind css. Namun saya menemukan dokumentasinya terlalu panjang dan agak membingungkan. Jadi saya memutuskan untuk membuat tutorial saya sendiri. Saya harap catatan saya dapat bermanfaat bagi kamu juga.

1. Bikin file css

Pertama bikin file css dulu terserah namanya apa saja. Dalam hal ini saya beri nama global.css. Lokasi dari file ini juga terserah. Dalam hal ini biasanya saya taruh di folder /assets/css/.

/* global.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

@apply directives juga bisa ditaruh di file ini.

Di root folder project kita, jalankan perintah ini. Fungsinya untuk mengubah file global.css tadi menjadi file tailwind.css. Nantinya file tailwind.css yang dipanggil di file html kita, bukan global.css.

npx tailwindcss -i ./html/assets/css/global.css -o ./html/assets/css/tailwind.css

Setiap kali global.css berubah, perintah ini harus dijalankan lagi.

Sebenarnya ada perintah watch dengan menambahkan -w di akhir perintah ini. Tapi saya tidak tahu kenapa, laptop saya membeku ketika saya menggunakan perintah -w. Meskipun ini adalah laptop Core i5 dan dengan memori 16 GB. Laptop teman saya juga mengalami hal yang sama. Itu sebabnya saya tidak pernah menggunakan perintah -w lagi.

Sebenarnya perintah watch ini berguna untuk membangun file tailwind.css secara otomatis setiap kali file global.css berubah. Tapi karena ada masalah sebelumnya, jadi saya tidak pernah menggunakannya.

3. Menggunakan tailwind.config.js

File tailwind.config.js juga dapat digunakan dalam proyek html biasa seperti ini. Buat saja file dengan mengetikkan perintah di bawah ini di root folder project kita.

npx tailwindcss init

File ini akan otomatis terdeteksi saat menjalankan perintah convert tadi (perintah npx sebelumnya). Biasanya saya menjalankan perintah convert di root project.

4. Panggil file tailwind.css di file html kita

Kamu bisa panggil file tailwind.css tadi dengan cara seperti ini:

<link rel="stylesheet" href="./assets/css/tailwind.css" />

Penutup

Catatan: npx akan ada satu paket dengan npm versi 5.2 ke atas.