Panduan Lengkap Setup TailwindCSS v4 di Proyek HTML, CSS, dan JavaScript

Daftar Isi

  • Persiapan Proyek
  • Langkah-Langkah Membuat Proyek
  • Cara Membuat Folder Baru di Windows dan Mac
    • Menggunakan File Explorer (Windows)
    • Menggunakan Finder (Mac)
    • Menggunakan Command Line (Terminal)
  • Tips Tambahan
  • Cara Install Tailwind CSS v4 Secara Manual di Proyek HTML, CSS, dan JavaScript
  • Tutorial Install dan Menggunakan live-server untuk HTML, CSS, dan JavaScript
  • Penutup

Persiapan Proyek

Sebelum memulai, pastikan kalian sudah memiliki:

  • Code Editor (VSCode direkomendasikan)
  • Node.js versi 22 ke atas

Langkah-Langkah Membuat Proyek

Berikut ini langkah-langkah yang perlu kalian lakukan untuk membuat proyek TailwindCSS 4:

Cara Membuat Folder Baru di Windows dan Mac

Membuat folder atau direktori adalah langkah penting saat memulai proyek pemrograman seperti HTML, CSS, dan JavaScript. Berikut ini beberapa cara untuk membuat folder baru di Windows dan Mac.

Menggunakan File Explorer (Windows)

  • Buka File Explorer (Tekan Windows + E).
  • Arahkan ke lokasi tempat Anda ingin membuat folder.
  • Klik kanan di area kosong, pilih New > Folder.
  • Beri nama folder, misalnya: tailwind-project.
  • Tekan Enter.

Menggunakan Finder (Mac)

  • Buka Finder.
  • Arahkan ke lokasi yang diinginkan (misalnya Desktop atau Documents).
  • Klik kanan dan pilih New Folder.
  • Beri nama folder, misalnya: tailwind-project.
  • Tekan Return (Enter di Mac).

Menggunakan Command Line (Terminal)

Di Windows (Command Prompt):

  • Buka Command Prompt atau Terminal (untuk Windows 11).
  • Arahkan ke direktori tujuan, contoh:
cd Desktop
  • Buat folder baru:
mkdir tailwind-project

Di Mac/Linux (Terminal):

  • Buka Terminal.
  • Arahkan ke direktori tujuan:
cd ~/Desktop
  • Buat folder baru:
mkdir tailwind-project

Tips Tambahan

  • Gunakan nama folder tanpa spasi (gunakan tanda hubung atau underscore) agar kompatibel dengan terminal dan pemrograman web.
  • Jika Anda membuat proyek Tailwind CSS, folder ini bisa digunakan sebagai tempat menyimpan file index.html, style.css, dan konfigurasi lainnya.

Cara Install Tailwind CSS v4 Secara Manual di Proyek HTML, CSS, dan JavaScript

  • Buka proyek menggunakan Code Editor lalu buat struktur proyek seperti berikut ini:
tailwind-project/
├── src/
│   ├── assets/
│   │   ├── images/
│   │   │   ├── backgrounds/
│   │   │   ├── icons/
│   │   │   └── thumbnails/
│   ├── js/
│   │   └── main.js
│   ├── index.html
│   ├── input.css
└───└── output.css *(generated by Tailwind CLI)*
  • Inisialisasi Proyek, jalankan perintah berikut di terminal (pastikan berada di dalam folder tailwind-project):
npm init -y
  • Install tailwindcss dan @tailwindcss/cli
npm install tailwindcss @tailwindcss/cli
  • Maka struktur proyek akan menjadi seperti ini:
tailwind-project/
├── **node_modules/** *(node.js)*
├── src/
│   ├── assets/
│   │   ├── images/
│   │   │   ├── backgrounds/
│   │   │   ├── icons/
│   │   │   └── thumbnails/
│   ├── js/
│   │   └── main.js
│   ├── index.html
│   ├── input.css
│   └── output.css (*generated by Tailwind CLI*)
├── **package-lock.json** *(node.js)*
└── **package.json** *(node.js)*
  • Import Tailwind di file CSS dengan cara buka file input.csslalu tambahkan kode berikut:
@import "tailwindcss";
  • Build proyek menggunakan Tailwind CLI dengan perintah berikut, maka akan ada file baru yaitu output.css
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
  • Selanjutnya buka file index.html lalu tambahkan kode berikut:
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello BuildWithAngga!
  </h1>
</body>
</html>
  • Class seperti text-3xl, font-bold, dan underline adalah contoh utility dari Tailwind CSS. Kalian bisa jelajahi lebih banyak class lainnya di dokumentasi resminya.

Tutorial Install dan Menggunakan live-server untuk HTML, CSS, dan JavaScript

Untuk melihat tampilan website, Anda bisa membuka file index.html langsung di browser. Namun, agar proses development lebih efisien, disarankan menggunakan library seperti live-server. Dengan live-server, setiap kali Anda menyimpan perubahan pada file HTML, browser akan melakukan reload otomatis sehingga mempercepat alur pengembangan.

  • Install live-server secara global
npm install -g live-server
  • Buka Terminal dan pastikan kalian sudah berada di direktori proyek, pada tutorial ini tailwind-project.
  • Jalankan perintah berikut:
live-server --watch="src/index.html"
  • Perintah tersebut menjalankan live-server dengan mode pemantauan (watch) hanya pada file src/index.html.
  • Buka browser maka hasilnya akan seperti ini:
Local Result

Penutup

Sebagai penutup, dengan mengikuti Panduan Lengkap Setup TailwindCSS v4 di Proyek HTML, CSS, dan JavaScript, kini kita telah berhasil mengintegrasikan Tailwind secara langsung menggunakan Tailwind CLI. Pendekatan ini sangat cocok untuk proyek kecil hingga menengah karena lebih ringan, cepat, dan tidak memerlukan konfigurasi tambahan seperti PostCSS atau bundler. Anda dapat langsung menulis class utility Tailwind di HTML dan melihat hasilnya secara real-time. Jangan lupa untuk terus eksplorasi dokumentasi resmi TailwindCSS agar makin mahir dalam membangun tampilan website yang modern dan responsif. Selamat mencoba!