Tailwind CSS versi 4 hadir dengan berbagai peningkatan, salah satunya adalah Tailwind CLI yang lebih cepat dan ringan. Pada tutorial ini, kamu akan belajar cara mengintegrasikan Tailwind CSS ke dalam proyek statis (HTML/CSS) hanya dengan beberapa langkah. Cocok untuk pemula yang ingin mencoba utility-first CSS framework tanpa konfigurasi rumit.
Prasyarat
- Node.js dan npm sudah terinstal di komputer (download di sini)
- Text editor (VS Code, Sublime, dll.)
- Terminal/Command Prompt (bawaan OS
Langkah 1: Buat Folder Project
Buka terminal, lalu buat folder baru untuk proyek dan masuk ke dalamnya.
mkdir tailwind-project
cd tailwind-project
Langkah 2: Inisialisasi package.json
Jalankan perintah berikut untuk membuat file package.json. Gunakan opsi -y agar jawaban otomatis default.
npm init -y
File package.json akan terbuat. Nanti kita akan menambahkan script di dalamnya.
Langkah 3: Instal Tailwind CSS dan CLI
Tailwind CSS v4 menyediakan paket @tailwindcss/cli untuk memproses file CSS. Jalankan perintah instalasi berikut:
npm install tailwindcss @tailwindcss/cli
Proses ini akan membuat folder node_modules dan file package-lock.json. Tunggu hingga selesai.
Langkah 4: Buat Struktur Folder dan File CSS Input
Buat folder src (tempat file CSS mentah) dan di dalamnya buat file input.css.
mkdir src
Buat file src/input.css dan isi dengan kode berikut:
@import "tailwindcss";
Baris ini akan mengimpor semua utilitas Tailwind CSS ke dalam file CSS kamu.
Langkah 5: Buat Folder dist dan File index.html
Folder dist akan menjadi tempat hasil akhir (file CSS yang sudah diproses dan HTML kamu). Buat folder dist dan file index.html di dalamnya.
mkdir dist
Buat file dist/index.html dengan kode awal berikut:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./style.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
Perhatikan tag <link> menunjuk ke style.css – ini adalah file CSS output yang akan dihasilkan oleh Tailwind CLI nanti.
Langkah 6: Tambahkan Script "dev" di package.json
Buka file package.json. Di dalam objek "scripts", tambahkan baris berikut:
"dev": "npx @tailwindcss/cli -i ./src/input.css -o ./dist/style.css --watch"
Penjelasan:
-i ./src/input.css : file CSS sumber.
-o ./dist/style.css : file CSS output (yang akan di-link di HTML).
--watch : mode watch, otomatis memproses ulang setiap kali ada perubahan.
Langkah 7: Jalankan Tailwind CLI (Mode Development)
Kembali ke terminal, jalankan perintah:
npm run dev
Setelah dijalankan, secara otomatis akan terbentuk file dist/style.css yang sudah berisi semua utilitas Tailwind. Terminal akan tetap berjalan (watch mode) – setiap kali kamu mengubah input.css atau menambah class baru di HTML, file CSS akan diperbarui.
Langkah 8: Lihat Hasilnya di Browser
Buka file dist/index.html menggunakan browser (klik kanan file → Open with browser, atau drag ke browser). Kamu akan melihat teks "Hello world!" dengan gaya:
Ukuran teks text-3xl
Tebal font-bold
Garis bawah underline
Langkah 9: Mulai Mengembangkan
Sekarang kamu bisa mengedit dist/index.html dan menambahkan class Tailwind lainnya. Contoh:
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
<div class="p-8">
<p class="text-sm text-gray-500">Tailwind CSS v4</p>
<p class="text-lg font-medium text-black">Belajar jadi lebih mudah!</p>
</div>
</div>
Setiap kali menyimpan file HTML, kamu tidak perlu menjalankan ulang CLI karena --watch akan terus memantau perubahan. Cukup refresh browser.
Struktur Folder Akhir
Setelah semua langkah selesai, proyek kamu akan terlihat seperti ini:
tailwind-project/
├── node_modules/
├── src/
│ └── input.css
├── dist/
│ ├── index.html
│ └── style.css (dihasilkan otomatis)
├── package.json
└── package-lock.json
Tips Penting
Jangan edit file dist/style.css secara manual – file ini akan ditimpa setiap kali Tailwind CLI berjalan.
Untuk production, kamu perlu meminifikasi CSS. Gunakan perintah:
npx @tailwindcss/cli -i ./src/input.css -o ./dist/style.css --minify
Tambahkan script "build" di package.json untuk memudahkan.
Pastikan dist/style.css sudah di-link dengan benar di HTML. Jika ingin mengubah letak file output, sesuaikan path di tag <link> dan opsi -o.
Kesimpulan
Dengan Tailwind CSS v4 dan CLI, kamu bisa langsung menulis kelas utilitas di HTML tanpa perlu konfigurasi Webpack atau PostCSS. Cara ini sangat cocok untuk proyek kecil, landing page, atau prototyping. Selamat mencoba!