Belajar Tailwind CSS - Mulai Cepat — Instalasi & Konfigurasi Dasar

#Pendahuluan

Setelah memahami arsitektur di episode 2, sekarang saatnya memulai cepat. Episode 3 memandu instalasi Tailwind CSS lewat tiga jalur yang paling umum: Tailwind CLI, PostCSS plugin, dan integrasi framework. Kalian juga menulis tailwind.config.js minimal dan menjalankan workflow development dengan watch mode.

Jalur mana yang dipilih tergantung project kalian. Project HTML statis cukup pakai CLI; project dengan bundler seperti Vite atau framework seperti Next.js biasanya memakai PostCSS atau plugin khusus. Hasil akhirnya identik: satu file CSS statis yang dihasilkan saat build.

#Pilihan Instalasi

#Tailwind CLI

Cara paling sederhana dan paling tidak bergantung pada bundler:

npm install -D tailwindcss
npx tailwindcss init

Kemudian build dilakukan dengan flag -i untuk input dan -o untuk output. CLI ini ideal untuk project HTML statis dan prototipe cepat. Catatan: di Tailwind versi 4, CLI dipecah ke paket terpisah @tailwindcss/cli — selalu cek dokumentasi rilis yang kalian pakai.

#PostCSS Plugin

Untuk project yang sudah memakai PostCSS — misalnya Vite atau build tooling kustom — pasang Tailwind sebagai plugin PostCSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Flag -p sekaligus membuat postcss.config.js:

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Tailwind lalu berjalan sebagai bagian dari pipeline bundler, dan autoprefixer menambahkan prefix browser secara otomatis.

#Framework-integrated

Framework modern menawarkan integrasi yang lebih rapi. Next.js dan SvelteKit memakai PostCSS di atas; Vite punya plugin resmi; Astro juga memakai PostCSS. Kita bedah integrasi per framework di episode 18 — untuk sekarang cukup tahu bahwa semuanya tetap menghasilkan CSS statis yang sama.

#Menulis tailwind.config.js Minimal

Config minimal cukup tiga kunci utama:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{html,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Yang paling krusial adalah content. Semakin akurat glob-nya, semakin cepat scan dan semakin kecil CSS yang dihasilkan. Jangan memasukkan folder yang tidak perlu seperti node_modules atau direktori build.

#Struktur File CSS dan Workflow Development

#Input, Output, dan Watch Mode

Buat file input CSS dengan direktif inti:

src/styles.css

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

Lalu jalankan build dasar:

npx tailwindcss -i src/styles.css -o dist/output.css

Untuk development, gunakan --watch agar build berjalan ulang otomatis setiap file berubah:

npx tailwindcss -i src/styles.css -o dist/output.css --watch

File dist/output.css yang dihasilkan inilah yang kalian tautkan di HTML:

Menautkan CSS hasil build

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

Perintah npx tailwindcss -i src/styles.css -o dist/output.css --watch akan menemani kalian sepanjang series. Di produksi, --watch dihilangkan dan build dijalankan satu kali pada CI — topik episode 13.

#Penutup

Episode 3 menyelesaikan setup praktis: kalian tahu tiga jalur instalasi (CLI, PostCSS, framework), menulis config minimal dengan content yang tepat, dan menjalankan workflow build dengan watch mode.

Inti yang harus dibawa pulang:

• Tailwind CLI paling sederhana untuk project statis.
• PostCSS plugin dibutuhkan saat project sudah memakai PostCSS.
• content menentukan file yang dipindai JIT — jaga tetap sempit.
• Direktif @tailwind base, components, utilities wajib ada di input CSS.
• -i dan -o menentukan file input dan output.
• --watch menyalakan build ulang otomatis untuk development.

Di episode 4 selanjutnya kita akan memasuki utility-first workflow: menulis kelas-kelas dasar yang paling sering dipakai — typography, spacing, sizing, display, flexbox, grid, dan state variants seperti hover dan focus. Ini saatnya mulai banyak menulis markup.