2. Cara Install

Langkah 1: Inisialisasi Proyek dengan npm

Jalankan perintah berikut di terminal (PADA DIREKTORI PROJEK MASING - MASING!!!):

npm init -y

Perintah ini akan membuat file package.json.

---

Langkah 2: Instal Tailwind CSS

Instal Tailwind CSS beserta alat pendukungnya:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Perintah di atas akan menghasilkan file konfigurasi tailwind.config.js.

---

Langkah 3: Buat File CSS

Buat folder baru bernama css lalu buat file CSS baru, misalnya awal.css, lalu tambahkan direktif Tailwind berikut:

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

---

Langkah 4: Konfigurasi Tailwind

Buka file tailwind.config.js dan tambahkan path file HTML Anda:

module.exports = {
  content: ["./*.html"], // Ubah hanya pada content
  theme: {
    extend: {},
  },
  plugins: [],
};

---

Langkah 5: Bangun File CSS

Jalankan perintah berikut untuk memproses file CSS Anda:
1. Buka file package.json, pada kode script tambahkan kode ini :

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "npx tailwindcss -i ./css/awal.css -o ./css/style.css --watch"
},

- script dev nantinya dapat di jalankan via terminal
- Perintah di dev ini akan membuat file style.css di folder css yang berisi gaya dari Tailwind CSS.
- buka lagi terminal/cmd (Direktori projek) lalu ketikan

npm run dev

---

Langkah 6: Hubungkan CSS ke File HTML

Buat file html baru (bebas namanya). Tambahkan style.css ke dalam file HTML Anda:

<link href="css/style.css" rel="stylesheet">

---

Extension VSC

Agar kita mudah dalam menulis class tailwind css kita dapat menginstall Extension Visual Studio Code dengan nama Tailwind CSS IntelliSense