Tailwind Config & Kustomisasi — Tailwind CSS

tailwind.config.js adalah pusat kustomisasi Tailwind — tempat menambahkan warna, font, spacing, dan lainnya. Struktur dasar: module.exports = { content…

Tailwind punya tema bawaan: palet warna, font, ukuran teks, dan breakpoint. Kamu bisa menambah isinya sendiri, misalnya warna brand, lalu langsung dapat class seperti bg-brand. Di Tailwind v4, tempatnya di file CSS, di dalam blok @theme. Bayangin kartu warna di toko cat. Kartu standarnya sudah lengkap, tapi kamu bisa minta toko meracik warna khusus dan memberinya nama, misalnya "oranye kantor". Sejak itu, cukup sebut namanya tiap kali beli.

🧪 Tebakan cepat: kamu menambah --color-brand: #f97316; di @theme. Setelah itu, bg-blue-500 masih jalan gak? Tebak dulu, jawabannya ada di bagian "Menambah atau mengganti".

@theme: daftarkan sekali, dapat class-nya

@import "tailwindcss";

@theme {
  --color-brand: #f97316;
  --font-heading: Georgia, serif;
}

<div class="p-6 rounded-xl bg-brand">
  <h2 class="font-heading text-xl font-bold text-white">Custom Card</h2>
</div>

@import "tailwindcss"; memuat Tailwind. Baris ini selalu di paling atas file CSS-mu.
@theme { ... } berisi token: nilai desain yang kamu beri nama, ditulis seperti variabel CSS.
Nama token = awalan (namespace) + nama pilihanmu. --color-brand memakai awalan --color-, jadi Tailwind membuat bg-brand, text-brand, dan border-brand. CSS-nya: background-color: var(--color-brand).
--font-heading memakai awalan --font-, jadi lahir class font-heading.

Awalan token	Contoh token	Class yang lahir
`--color-`	`--color-brand: #f97316`	`bg-brand`, `text-brand`, `border-brand`
`--font-`	`--font-heading: Georgia, serif`	`font-heading`
`--radius-`	`--radius-card: 20px`	`rounded-card`
`--breakpoint-`	`--breakpoint-3xl: 90rem`	prefix `3xl:` (mulai 1440px)

Semua token juga jadi variabel CSS biasa, jadi di CSS-mu sendiri kamu bisa menulis color: var(--color-brand). Di Playground, yang memuat Tailwind lewat CDN, tulis @theme di dalam <style type="text/tailwindcss">.

Menambah atau mengganti

@theme menambah ke tema bawaan. Setelah --color-brand didaftarkan, semua warna bawaan tetap ada. Itu jawaban tebakannya: bg-blue-500 masih jalan.

Mau membuang seluruh palet bawaan dan cuma pakai warnamu? Tulis --color-*: initial; dulu:

@theme {
  --color-*: initial;
  --color-brand: #f97316;
}

Sekarang yang tersisa cuma brand. bg-blue-500, bg-slate-800, bahkan text-white gak menghasilkan CSS lagi. Class kurung siku seperti bg-[#1e293b] tetap jalan, karena gak memakai token.

Proyek lama: tailwind.config.js

Di Tailwind v3, dan di banyak proyek yang sudah ada, pengaturan ini ditulis di file JavaScript bernama tailwind.config.js (atau tailwind.config.ts):

// tailwind.config.js (Tailwind v3)
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {
        brand: "#3B82F6",
      },
    },
  },
}

content adalah daftar file yang dibaca Tailwind untuk mencari class. Di v4 file-nya dicari otomatis.
theme.extend menambah ke tema bawaan: bg-brand dan text-brand lahir, dan bg-blue-500 tetap ada.
Tanpa extend, misalnya theme: { colors: { brand: "#3B82F6" } }, kamu mengganti seluruh palet. bg-blue-500 hilang.
Nilainya boleh hex, rgb(...), atau hsl(...). Idenya sama dengan v4: extend itu menambah, menulis langsung itu mengganti.

Nilai sekali pakai: kurung siku

Ini kartu latihan, ditulis dengan kurung siku:

<div id="card" class="p-6 rounded-xl shadow-lg bg-[#1e293b]">
  <h2 id="title" class="text-xl font-bold text-white">Custom Card</h2>
  <p id="desc" class="mt-2 text-[#94a3b8]">Dengan warna kustom</p>
</div>

Class	CSS yang dihasilkan	Artinya
`p-6`	`padding: 1.5rem;`	jarak dalam 24px
`rounded-xl`	`border-radius: 0.75rem;`	sudut 12px
`shadow-lg`	`box-shadow: 0 10px 15px ...;`	bayangan besar
`bg-[#1e293b]`	`background-color: #1e293b;`	biru gelap pilihanmu
`text-xl`	`font-size: 1.25rem;`	teks 20px
`font-bold`	`font-weight: 700;`	tebal
`mt-2`	`margin-top: 0.5rem;`	jarak atas 8px
`text-[#94a3b8]`	`color: #94a3b8;`	abu-abu kebiruan

Kurung siku cocok untuk nilai yang dipakai sekali. Kalau #1e293b dipakai di banyak kartu, jadikan token. Itu yang kamu lakukan di latihan: --color-kartu: #1e293b; dan --color-redup: #94a3b8; di @theme, lalu bg-kartu dan text-redup. Editor latihan memuat Tailwind v4 lewat CDN, sama seperti Playground, jadi @theme-nya ditulis di dalam <style type="text/tailwindcss">.

⚠️ Jebakan yang sering ketemu

Lupa awalan namespace. --brand: #f97316 di @theme gak membuat bg-brand. Tailwind cuma kenal token dengan awalan seperti --color-. Gak ada error: class-nya diam-diam gak menghasilkan CSS.
Lupa extend di config v3. theme: { colors: {...} } menghapus palet bawaan. Taruh warnamu di theme.extend.colors.
@theme di <style> biasa. Tailwind yang dimuat lewat CDN, di editor latihan maupun Playground, cuma membaca @theme di dalam <style type="text/tailwindcss">. Di <style> biasa, @theme diabaikan dan bg-kartu gak menghasilkan CSS apa pun.
Salah angka di latihan. Yang dicek: padding #card 24px (p-6), border-radius #card 12px (rounded-xl), font-weight #title 700 (font-bold, bukan font-semibold), dan warna dari token: latar #card #1e293b lewat bg-kartu, teks #desc #94a3b8 lewat text-redup.

TL;DR: Di Tailwind v4, token tema ditulis di CSS: @import "tailwindcss"; lalu @theme { --color-brand: #f97316; }, dan class bg-brand, text-brand, border-brand langsung lahir. Awalan menentukan class-nya: --color- untuk warna, --font- untuk font, --breakpoint- untuk prefix layar. @theme menambah ke tema bawaan; --color-*: initial mengganti seluruh palet. Di proyek v3, tempatnya tailwind.config.js: theme.extend menambah, theme tanpa extend mengganti. Nilai sekali pakai cukup kurung siku, seperti bg-[#1e293b]. Di latihan: token --color-kartu dan --color-redup di @theme, dipakai sebagai bg-kartu dan text-redup, plus p-6 (24px), rounded-xl (12px), dan font-bold (700).