Instalasi Tailwind CSS via Node.js / NPM
Meskipun Tailwind CSS bisa digunakan melalui CDN (menyematkan link langsung di HTML), cara tersebut memiliki banyak batasan dan tidak direkomendasikan untuk tahap produksi (production).
Untuk membuka kekuatan penuh Tailwind—seperti mengkustomisasi tema, menggunakan plugin, dan memastikan ukuran file CSS tetap sangat kecil—Anda harus menginstalnya melalui Node.js dan NPM (Node Package Manager). Pendekatan ini sangat ideal dan menjadi standar ketika Anda bekerja dengan kerangka kerja backend modern seperti Laravel.
Mari kita mulai proses instalasinya.
Prasyarat
Pastikan Anda sudah menginstal Node.js di MacBook Anda. Anda bisa mengeceknya dengan membuka terminal Warp dan menjalankan perintah:
node -v
npm -v
Jika versi angka muncul, Anda sudah siap!
Langkah 1: Inisialisasi Proyek NPM
Buka terminal Anda, arahkan ke direktori proyek Anda (misalnya proyek portal SatuMedia), lalu inisialisasi proyek NPM. Ini akan membuat file package.json.
npm init -y
Langkah 2: Instalasi Tailwind CSS
Selanjutnya, kita akan menginstal Tailwind beserta dependensi pendukungnya. Kita menginstalnya sebagai devDependencies (ditandai dengan -D) karena Tailwind hanya digunakan pada saat tahap kompilasi, bukan saat aplikasi berjalan di server.
npm install -D tailwindcss
Langkah 3: Membuat File Konfigurasi
Jalankan perintah berikut untuk membuat file tailwind.config.js. File ini adalah "otak" dari kustomisasi Tailwind Anda.
npx tailwindcss init
Langkah 4: Mengatur Jalur Template (Content Paths)
Buka file tailwind.config.js yang baru saja terbuat. Anda harus memberi tahu Tailwind di mana letak file-file HTML, JavaScript, atau Blade template Anda berada. Tailwind akan memindai file-file ini untuk mencari class apa saja yang Anda gunakan.
Ubah bagian content menjadi seperti ini (sesuaikan dengan struktur folder Anda):
/** @type {import('tailwindcss').Config} */
module.exports = { < span class="hljs-comment">// Tambahkan ekstensi file yang relevan, seperti .blade.php jika menggunakan Laravel content: ["./src/**/*.{html,js,php,blade.php}"], theme: { extend: {}, }, plugins: [],
}
Langkah 5: Menambahkan Direktif Tailwind ke CSS Utama
Buat sebuah file CSS sumber (misalnya src/input.css). File ini akan menjadi tempat kita memasukkan perintah dasar Tailwind. Tambahkan tiga baris kode berikut:
@tailwind base;
@tailwind components;
@tailwind utilities;
Langkah 6: Memulai Proses Kompilasi (Build Process)
Langkah terakhir adalah menjalankan compiler Tailwind (CLI). Perintah ini akan mengambil file input.css Anda, memprosesnya, dan menghasilkan file output.css yang siap digunakan di HTML.
Jalankan perintah ini di terminal:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Catatan: Bendera --watch akan membiarkan proses berjalan di latar belakang. Setiap kali Anda menyimpan file HTML atau Blade Anda, Tailwind akan otomatis memperbarui file output.css.
Penggunaan di dalam HTML
Sekara ng, Anda cukup menautkan file CSS yang sudah dikompilasi (output.css) ke dalam file HTML atau kerangka layout utama aplikasi Anda.
html>
<html lang="id">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dashboard Kolak Pisangtitle> <link href="./dist/output.css" rel="stylesheet">
head>
<body class="bg-gray-100 text-gray-800"> <h1 class="text-3xl font-bold text-blue-600 text-center mt-10"> Sistem Manajemen Akta Berhasil Disiapkan! h1>
body>
html>
Tips Pro untuk Alur Kerja Laravel
Jika Anda sedang membangun antarmuka untuk proyek berbasis Lara vel (seperti SatuMedia atau Kolak Pisang), Anda tidak perlu menjalankan perintah CLI murni seperti di Langkah 6.
Laravel modern menggunakan Vite untuk memaketkan aset. Anda cukup menginstal Tailwind via NPM, menambahkannya ke dalam konfigurasi postcss.config.js dan vite.config.js, lalu menjalankan npm run dev. Vite akan mengurus semua kompilasi Tailwind secara instan dengan performa yang sangat cepat (HMR).
