Setelah belajar dasar-dasar Tailwind CSS kemarin, mungkin Anda bertanya: "Bagaimana jika warna brand saya tidak ada di daftar default Tailwind?" atau "Bagaimana cara mengganti font standar menjadi Google Fonts?"
Di sinilah peran penting file tailwind.config.js. Hari ini di MHFSDEV, kita akan membedah cara melakukan kustomisasi agar desain website Anda tampil beda dan unik.
Kenapa Harus Menggunakan tailwind.config.js?
File konfigurasi ini adalah "otak" dari proyek Tailwind Anda. Dengan mengatur file ini, Anda bisa:
- Menambahkan palet warna khusus sesuai identitas brand.
- Mengatur breakpoint (ukuran layar) custom.
- Menambahkan font keluarga (font-family) dari Google Fonts.
- Menghapus utility yang tidak digunakan untuk memperkecil ukuran file.
1. Cara Menambahkan Warna Custom
Misalnya, Anda ingin menambahkan warna bernama "brand-primary". Anda cukup menambahkannya di dalam bagian theme.extend.
module.exports = {
theme: {
extend: {
colors: {
'brand-primary': '#3498db',
'brand-dark': '#2c3e50',
},
},
},
}
Sekarang, Anda bisa langsung menggunakan class bg-brand-primary atau text-brand-dark di dalam HTML Anda.
2. Cara Menambahkan Google Fonts
Untuk mengganti font, pastikan Anda sudah memanggil link Google Fonts di bagian <head> HTML, lalu atur di konfigurasi:
module.exports = {
theme: {
extend: {
fontFamily: {
'poppins': ['Poppins', 'sans-serif'],
},
},
},
}
Gunakan class font-poppins pada elemen yang Anda inginkan.
Contoh Implementasi Lengkap (Live Demo)
Berikut adalah contoh kode yang menggabungkan warna dan font custom yang bisa Anda coba di Play Tailwind atau lokal:
<!-- Gunakan font dan warna custom -->
<div class="font-poppins bg-brand-dark p-10 text-white shadow-xl">
<h1 class="text-3xl font-bold text-brand-primary">
Kustomisasi Berhasil!
</h1>
<p class="mt-4">
Teks ini menggunakan font Poppins dan background warna brand-dark.
</p>
</div>
Tips SEO: Mengapa Kustomisasi Itu Penting?
Google menyukai website yang memiliki identitas visual yang unik dan terstruktur. Dengan menggunakan tailwind.config.js, kode CSS Anda akan tetap ramping (clean code) karena Anda tidak perlu menulis inline-style berulang kali. Website yang ringan dan cepat diakses akan mendapatkan peringkat lebih baik di mesin pencari.
Kesimpulan: Jangan membatasi kreativitas Anda dengan warna default. Manfaatkan file konfigurasi untuk membuat website yang benar-benar mewakili diri Anda atau klien Anda.
Pantau terus mhfsdev untuk tutorial pemrograman menarik lainnya setiap hari!
0 Comments