Cara Instalasi TailwindCSS dari Nol (Lengkap untuk Pemula)

TailwindCSS adalah framework CSS utility-first yang sangat populer untuk membuat tampilan website modern dengan cepat.
Namun, sebelum bisa menggunakan TailwindCSS, kita perlu menyiapkan Node.js dan beberapa package pendukung.

1️⃣ Instal Node.js (Minimal Versi 14)

TailwindCSS membutuhkan Node.js versi 14 atau lebih baru.
Disarankan pakai versi LTS (Long Term Support) terbaru.

🔹 Langkah instalasi:

Download installer Node.js di nodejs.org.
Pilih LTS (bukan Current).
Jalankan installer:
- Centang Add to PATH (supaya perintah node dan npm dikenali di terminal).
- Pilih default runtime saja kalau ada pilihan.
Setelah selesai, cek instalasi:

bash
node -v
npm -v

Kalau berhasil, akan muncul versi Node.js dan npm.

Buat Folder Project

Misalnya kita buat project bernama tukang.id:

Bash
mkdir myproject
cd myproject

Inisialisasi npm

bash
npm init -y

Ini akan membuat file package.json.

Instal TailwindCSS, PostCSS, dan Autoprefixer

Jalankan perintah berikut:

npm install -D tailwindcss postcss autoprefixer

Lalu buat file konfigurasi:

bash
npx tailwindcss init -p

Ini akan membuat:

tailwind.config.js
postcss.config.js

Buat File CSS Input

Buat folder assets/css/ dan file input.css di dalamnya:

input.css

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

Compile CSS Menjadi Output

Jalankan perintah:

bash
npx tailwindcss -i ./assets/css/input.css -o ./assets/css/output.css --watch

File output.css akan terbuat di assets/css/.

--watch artinya Tailwind akan otomatis rebuild setiap kali kamu edit file.

Kalau hanya mau build sekali saja (misalnya sebelum deploy), jalankan:

bash
npx tailwindcss -i ./assets/css/input.css -o ./assets/css/output.css

Gunakan di HTML / PHP (CodeIgniter / Laravel / Plain HTML)

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

Lalu coba tes tombol sederhana:

html
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Hello Tailwind!
</button>

Kalau tombolnya berwarna biru dengan efek hover → artinya TailwindCSS berhasil 🚀.

Menambahkan Custom Warna / Konfigurasi

js

module.exports = {
  content: ["./**/*.{html,php,js}"],
  theme: {
    extend: {
      colors: {
        primary: '#1e40af',
        secondary: '#3b82f6',
        accent: '#60a5fa',
      },
    },
  },
  plugins: [],
}

Setelah itu jalankan ulang build (npx tailwindcss ...) agar perubahan ter-update.

Tips Praktis

Untuk development gunakan:

bash

npx tailwindcss -i ./assets/css/input.css -o ./assets/css/output.css --watch

Untuk build final (production):

npx tailwindcss -i ./assets/css/input.css -o ./assets/css/output.css --minify

Selamat Mencoba, jika ada yang perlu di tanyakan sampaikan aja melalui chat admin di 085394252941.
semoga bermanfaat.

Bagikan Ke Sosial Media: