Belajar Tailwind CSS - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar Tailwind CSS! Series ini membawa kalian menguasai Tailwind CSS — utility-first CSS framework yang paling banyak dipakai di dunia — dari fondasi konsep sampai production readiness. Total ada 23 episode yang tersusun dari enam fase.

Sebelum menyentuh tailwindcss, ada beberapa skill dasar dan perangkat lunak yang wajib kalian miliki. Mengapa penting? Karena Tailwind bekerja dengan cara yang berbeda dari CSS tradisional: kalian menulis utility class langsung di markup, lalu build tool memindai file dan membangkitkan CSS hanya untuk kelas yang benar-benar dipakai. Pemahaman tentang HTML dan CSS dasar akan membuat semua konsep itu terasa natural.

Episode 0 adalah peta jalan kalian. Kita akan memastikan skill dasar, menyiapkan Node.js dan editor, membuat project skeleton, menginstall Tailwind CSS, lalu memverifikasi toolchain build pertama kali.

#Skill Dasar yang Wajib Dikuasai

#HTML Semantik dan Struktur Dokumen

Tailwind bekerja di dalam atribut class pada elemen HTML. Kalian wajib nyaman menulis markup semantik: header, nav, main, section, article, footer, serta memahami hirarki elemen dan atribut seperti aria-* dan data-*. Utility class seperti flex atau grid hanya bermakna jika diterapkan pada struktur yang benar.

#CSS Dasar: Box Model, Flexbox, dan Grid

Ini fondasi yang tidak bisa ditawar. Tailwind menamai utility class berdasarkan konsep CSS yang sudah ada: p-4 adalah padding, m-2 adalah margin, flex mengaktifkan flexbox, grid mengaktifkan grid. Pahami dulu:

• Box model: content, padding, border, margin — sumber dari p-, m-, border-*.
• Flexbox: main axis, cross axis, justify-content, align-items.
• Grid: grid-template-columns, grid-template-rows, gap.
• Specificity dan cascade: urutan dan tingkat kekhususan selector.

padding  ->  p-*
margin   ->  m-*
flexbox  ->  flex, justify-*, items-*
grid     ->  grid, grid-cols-*, gap-*

Jika konsep-konsep ini terasa asing, luangkan waktu mempelajari dasar CSS dulu sebelum melanjutkan series ini.

#Build Tools dan Terminal

Tailwind dijalankan lewat command line atau bundler. Kalian wajib terbiasa dengan terminal, konsep working directory, dan perintah dasar seperti npm install. Tidak perlu ahli — cukup nyaman menjalankan perintah dan membaca output error.

#Perangkat Lunak yang Perlu Disiapkan

#Node.js dan Package Manager

Tailwind CSS adalah paket npm. Pastikan Node.js versi LTS terbaru sudah terinstall:

node --version
npm --version

Keluaran node --version harus menunjukkan versi 18 atau lebih baru. Tailwind versi 4 bahkan membutuhkan Node.js 20 ke atas. Gunakan npm, pnpm, atau yarn sesuai kenyamanan — seluruh series ini memakai npm.

#Editor dan Browser

Editor rekomendasi adalah VS Code dengan ekstensi Tailwind CSS IntelliSense — ekstensi ini memberikan autocomplete, linting kelas, dan tooltip preview CSS. Untuk browser, gunakan Chrome, Firefox, atau Edge modern, lengkap dengan DevTools. DevTools akan menjadi sahabat kalian untuk menginspeksi utility class yang sudah dibangkitkan.

Opsional tapi sangat berguna: akun GitHub dan akses ke platform CI seperti GitHub Actions atau Vercel. Kita akan memakainya di episode 13 untuk pipeline build. Hardware cukup komputer biasa dengan RAM 8GB atau lebih.

#Setup Cepat Project

#Membuat Project Skeleton

Buat direktori baru dan inisialisasi project Node:

mkdir belajar-tailwind
cd belajar-tailwind
npm init -y

Lalu siapkan struktur minimal dengan file HTML utama dan direktori source CSS:

belajar-tailwind/
  index.html
  src/
    styles.css
  package.json

#Menginstall Tailwind CSS

Install Tailwind sebagai devDependency dan buat file konfigurasi:

npm install -D tailwindcss
npx tailwindcss init

Perintah npx tailwindcss init menghasilkan tailwind.config.js. Isi file src/styles.css dengan tiga direktif inti — detailnya akan dibahas di episode 2:

src/styles.css

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

#Verifikasi Toolchain

Jalankan build pertama untuk memastikan semuanya bekerja:

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

Jika berhasil, muncul file dist/output.css. Buka file itu dan lihat: di dalamnya sudah ada CSS reset dari base, beberapa utility default, dan tidak ada error. Kalian juga bisa memakai mode watch:

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

Dengan mode ini, setiap kali kalian mengedit index.html, CSS dibangkitkan ulang secara otomatis. Ini workflow dasar yang akan menemani kalian sepanjang series.

#Penutup

Di episode 0 kalian sudah menyiapkan pijakan untuk seluruh series: memahami skill dasar HTML dan CSS yang dibutuhkan, menyiapkan Node.js, editor, dan browser, membuat project skeleton, menginstall Tailwind CSS, serta memverifikasi build pertama.

Inti yang harus dibawa pulang:

• Kuasai HTML semantik dan CSS dasar: box model, flexbox, grid, specificity.
• Pastikan Node.js LTS terinstall dan npm berfungsi.
• Siapkan VS Code dengan ekstensi Tailwind CSS IntelliSense.
• Project minimal: index.html, src/styles.css, dan tailwind.config.js.
• Build pertama lewat npx tailwindcss -i src/styles.css -o dist/output.css.
• Mode --watch mempercepat iterasi development.

Di episode 1 selanjutnya kita akan membahas sejarah, latar belakang, dan mengapa membutuhkan Tailwind CSS — dari evolusi utility-first CSS, perbandingan dengan CSS tradisional dan BEM, hingga studi kasus kecil migrasi komponen. Pastikan toolchain kalian sudah siap, karena perjalanan Belajar Tailwind CSS baru saja dimulai!