Arsitek Desain: Kustomisasi & Extend Theme
Tailwind memang hadir dengan ratusan warna dan ukuran bawaan yang bagus. Namun, setiap perusahaan (seperti
Gojek, Tokopedia, atau Traveloka) pasti memiliki Brand Color dan jenis huruf (Font) mereka
sendiri yang spesifik.
Di sinilah file tailwind.config.js
bersinar. File ini adalah "Pusat Komando" di mana kamu bisa menambah warna baru, mengubah *breakpoint*
layar, hingga mendaftarkan font kustom!
🎨 1. Menambahkan Warna Brand (Extend Colors)
Katakanlah Startup-mu memiliki warna identitas "Neon Pink" (#FF007F). Daripada menulis kode
hex panjang terus-menerus, kita bisa mendaftarkannya dengan nama brand-primary.
module.exports = {
theme: {
extend: {
colors: {
'brand-primary': '#FF007F',
'brand-dark': '#0A0A1F',
}
}
}
}
Class baru tercipta secara otomatis:
⚠️ 2. Peringatan Krusial: theme vs extend
Ini adalah kesalahan nomor 1 terbanyak pemula Tailwind CSS. Jika kamu menaruh kodemu DI LUAR
blok extend, kamu akan menghapus
SELURUH bawaan Tailwind untuk kategori tersebut!
X CARA FATAL
theme: {
colors: { // <-- BAHAYA!
merek: '#ff0000'
}
}
Akibat: Semua warna bawaan seperti bg-blue-500 atau bg-red-500 HILANG / RUSAK. Tailwind hanya akan mengenali 1
warna: bg-merek.
✔ CARA BENAR
theme: {
extend: { // <-- AMAN
colors: { merek: '#ff0000' }
}
}
Akibat: Tailwind menambahkan bg-merek
ke dalam keluarga warna bawaannya tanpa menghapus yang lama.
✍️ 3. Mendaftarkan Font Eksternal & Breakpoint
Selain warna, modifikasi paling umum kedua adalah mendaftarkan jenis Font dari Google Fonts (misal: "Poppins" atau "Inter"), dan sesekali menyesuaikan ukuran titik pecah layar (Breakpoints) untuk TV besar.
module.exports = {
theme: {
extend: {
fontFamily: {
'sans': ['Inter', 'sans-serif'], // Menimpa font default bawaan
'heading': ['Poppins', 'sans-serif'], // Memunculkan class baru: font-heading
}
},
// Sengaja DILUAR extend jika ingin merombak total ukuran layar Standar Apple/Android
screens: {
'tablet': '640px', // Class baru: tablet:flex
'laptop': '1024px', // Class baru: laptop:w-1/2
'desktop': '1280px',
},
}
}
Intisari Konfigurasi
- Pusat kustomisasi seluruh proyekmu berada di file tailwind.config.js.
- Selalu gunakan block
extend: {}jika kamu hanya ingin menambahkan class baru (seperti warna/font) tanpa menghancurkan utility bawaan Tailwind. - Nama key yang kamu daftarkan (seperti `brand-primary` atau `heading`) akan secara atomatis di-generate
oleh Tailwind menjadi prefix utility seperti
text-brand-primary,bg-brand-primary, danborder-brand-primary. Sangat cerdas!