Setup & Instalasi Tailwind CSS
Ada dua cara utama untuk memasukkan Tailwind ke dalam website-mu: Cara instan (Play CDN) yang cocok untuk
belajar, dan cara profesional (Tailwind CLI / PostCSS) yang diwajibkan untuk proyek nyata (Production).
Di tahap pembelajaran ini, kita akan membahas keduanya agar kamu paham kapan harus menggunakan metode yang
tepat.
🚀 1. Cara Instan: Bermain dengan CDN (Untuk Belajar Khusus)
Jika kamu hanya ingin segera mencoba mengetik class Tailwind di HTML tanpa repot menginstal Node.js atau alat
rumit lainnya, kamu cukup menempelkan satu baris script Play CDN di dalam tag <head> mu.
<html> <head> <!-- Tempelkan sebaris script ini, bum! Tailwind Aktif --> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <h1 class="text-3xl font-bold underline text-blue-500"> Halo, Tailwind Instan! </h1> </body> </html>
Peringatan Keras dari Tailwind
Script CDN ini TIDAK BOLEH digunakan untuk website yang sudah dirilis ke publik (Production). Script ini sangat berat karena ia mengkompilasi belasan ribu CSS di dalam browser pengunjung saat halaman dimuat. Ini hanya murni untuk lingkungan main-main (Development/Belajar).
💼 2. Cara Profesional: Tailwind CLI (Untuk Dunia Nyata)
Cara resmi dan terbaik membangun proyek adalah menggunakan Tailwind CLI. Untuk mengikuti langkah ini, komputer kamu wajib sudah terinstal Node.js.
Inisialisasi Proyek
Buka Terminal/CMD di foldermu, lalu perintahkan NPM untuk mendownload Tailwind dan membuat file konfigurasinya.
❯npx tailwindcss init
File baru tailwind.config.js akan tercipta otomatis.
Tentukan Target File HTML
Buka file tailwind.config.js, beritahu Tailwind di folder
mana ia harus mengintip class-class HTML yang kamu ketik.
module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {} }, plugins: [], }
Tambahkan Direktif CSS
Buat file baru: src/input.css. Masukkan 3 pilar penopang utama
Tailwind ke dalamnya.
@tailwind components;
@tailwind utilities;
Nyalakan Mesin Kompilator (Build Process)
Jalankan perintah Terminal ini agar Tailwind terus mengawasi
kodemu. Setiap kamu men-save HTML, alat ini akan memeras file input.css menjadi CSS matang di output.css.
Langkah Terakhir:
Hubungkan HTML-mu ke file output.css (BUKAN input.css).
⚙️ Bagaimana Mesin CLI Tailwind Bekerja?
Masih bingung kenapa Tailwind harus dijalankan lewat alat CLI Terminal? Fitur interaktif di bawah ini akan memvisualisasikan cara kerja cerdas mesin Tailwind dalam mengurangi ukuran file.
1. Kamu Mengetik HTML
Cetikkan sembarang class (misal: tulislah flex atau hapus p-4) ke dalam
kotak teks di bawah ini lalu tekan tombol Simpan.
2. Tailwind Membaca & Mencetak
Meskipun Tailwind punya 10.000 utility, ia HANYA mencetak CSS yang kamu ketik di HTML!
📋 Ringkasan Instalasi
<script src="https://cdn.tailwindcss.com">
di HTML mu. Mudah, instan, tapi dilarang keras untuk dipublikasi karena memberatkan browser pengguna
yang membuka situsmu.