Belajar Tailwind CSS - Konsep Dasar & Arsitektur Utama

#Pendahuluan

Sebelum menulis banyak utility class, kalian harus paham bagaimana Tailwind bekerja. Episode 2 membedah arsitektur utama: engine pembangkit CSS, cara Tailwind memindai file, struktur tailwind.config.js, dan direktif inti yang menjadi pintu masuk setiap project.

Pemahaman ini bukan sekadar teori. Ketika JIT tidak membangkitkan kelas yang kalian harapkan, atau ketika ukuran CSS membengkak, akar masalahnya hampir selalu ada di tiga hal yang akan kita bahas: content path, theme config, dan direktif. Setelah episode ini, kalian akan tahu persis ke mana harus melihat.

#Cara Kerja Tailwind di Balik Layar

#Utility Generation dan JIT Engine

Sejak versi 3, Tailwind memakai engine just-in-time (JIT). Alih-alih membangkitkan ribuan utility yang mungkin dipakai, JIT membangkitkan CSS hanya untuk kelas yang benar-benar muncul. Hasilnya: ukuran output sangat kecil, dan kalian bisa memakai nilai arbitrer seperti p-[13px] tanpa konfigurasi tambahan.

Kelas arbitrer ditulis dalam tanda kurung siku — misalnya text-[14px] atau w-[calc(100%-1rem)] — dan hanya akan dibangkitkan jika benar-benar muncul di file yang dipindai.

#Content Scanning

JIT perlu tahu file mana yang harus dipindai untuk mencari nama kelas. Ini diatur lewat opsi content pada config:

tailwind.config.js minimal

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

Array content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"] memberitahu Tailwind glob mana yang harus dipindai. File di luar pola ini tidak akan berkontribusi pada CSS akhir — ini akar dari banyak misteri "kelas tidak muncul".

#Struktur tailwind.config.js

#content

Sudah dibahas di atas. Rekomendasi umum: masukkan semua file yang berisi nama kelas, termasuk template, komponen, dan file markdown. Semakin sempit dan tepat pola glob, semakin cepat build dan semakin kecil CSS yang dihasilkan.

#theme dan variants

Bagian theme mendefinisikan design token seperti warna, spacing, font, dan breakpoint. theme.extend menambah atau mengubah token tanpa menghapus default. Sedangkan variants (deprecated di versi baru) mengatur kapan variant seperti hover atau md dibangkitkan — di versi modern, sebagian besar dikontrol langsung lewat utility prefixes.

#plugins dan safelist

plugins adalah tempat mendaftarkan plugin eksternal seperti @tailwindcss/forms. safelist memaksa sekumpulan kelas untuk selalu dibangkitkan meskipun tidak terdeteksi di content — penting untuk kelas dinamis, dan akan dibahas dalam di episode 8 dan 11.

#Direktif Inti

#@tailwind base, components, dan utilities

Setiap project Tailwind dimulai dari file CSS yang memuat tiga direktif ini:

src/styles.css

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

• @tailwind base menyuntikkan preflight — normalisasi gaya antar-browser seperti modern reset.
• @tailwind components menyediakan tempat kelas komponen dan plugin components.
• @tailwind utilities menampung semua utility class yang dibangkitkan JIT.

Urutannya penting karena menentukan urutan deklarasi dan cascade. Jangan menukar posisinya tanpa alasan.

#@apply

Direktif @apply memungkinkan kalian menyisipkan utility class ke dalam aturan CSS sendiri:

Menggunakan @apply

.btn-primary {
  @apply rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600;
}

@apply hover:bg-blue-600 menyertakan variant hover di dalam aturan. Ini jembatan antara utility class dan CSS kustom — dibahas lebih dalam di episode 7.

#Plugin Resmi yang Perlu Dikenal

Empat plugin resmi yang paling sering dipakai:

• @tailwindcss/forms — reset dan styling yang konsisten untuk elemen form.
• @tailwindcss/typography — class prose untuk konten kaya seperti artikel blog.
• @tailwindcss/aspect-ratio — rasio aspek deterministik, kini menjadi utility core.
• @tailwindcss/line-clamp — memotong teks multi-baris, juga sudah masuk core sejak 3.3.

Memasangnya sederhana:

npm install -D @tailwindcss/forms @tailwindcss/typography

Lalu daftarkan di array plugins pada config. Episode 9 akan membahas plugin custom dan ecosystem secara penuh.

#Penutup

Episode 2 memberi fondasi arsitektural: bagaimana JIT membangkitkan CSS hanya untuk kelas yang terdeteksi, bagaimana content menentukan apa yang dipindai, struktur config, serta peran direktif @tailwind dan @apply.

Inti yang harus dibawa pulang:

• JIT membangkitkan utility hanya untuk kelas yang muncul di content.
• content menentukan file yang dipindai; salah glob sama dengan kelas hilang.
• theme.extend menambah token tanpa menghapus default.
• Urutan base, components, utilities memengaruhi cascade.
• @apply menyisipkan utility class ke CSS kustom.
• Plugin official hanya perlu dipasang bila fitur-nya belum menjadi core.

Di episode 3 selanjutnya kita akan mulai cepat: memilih cara instalasi (CLI, PostCSS, atau framework), menulis tailwind.config.js minimal, dan menjalankan workflow development dengan --watch. Semua pengetahuan arsitektur ini akan langsung dipakai praktik.