Dunia Gelap: Dukungan Dark Mode
Dulu, membuat tema "Gelap" (Dark Mode) untuk website adalah mimpi buruk programmer CSS karena harus merombak
hampir seluruh kode warna.
Di Tailwind, ini semudah menambahkan awalan ajaib dark: di depan class warna
apapun! Secara cerdas, Tailwind mendeteksi pengaturan sistem komputer penggunamu secara otomatis dan
menerapkan warna gulitanya.
🌓 1. Sihir Sintaks dark:
Konsepnya sama persis seperti Responsive (md:, lg:) atau Hover (hover:). Mantra utamanya adalah: "Tulis warna Terang dulu, lalu timpa dengan warna Gelap jika diaktifkan."
class="bg-white text-gray-900 dark:bg-slate-900 dark:text-white rounded-xl shadow-md p-6"
🌗 2. Latihan Interaktif (Membangun Tombol Saklar)
Di dunia nyata, kita ingin pengguna bisa menekan tombol Matahari/Bulan untuk mengganti tema
secara manual, bukan hanya mengandalkan pengaturan jam komputernya.
Dalam Tailwind, kita melakukannya lewat mode class. Artinya, ketika Tailwind
mendeteksi class bernama dark
disuntikkan ke dalam tag HTML teratas (<body> atau <html>), SEMUA elemen dengan varian dark: di
dalamnya akan menyala!
Simulator Aplikasi
Danau Ketenangan
dark:text-indigo-400
Rasakan keheningan malam di bawah taburan bintang galaksi Bima Sakti. Udara dingin dan api unggun menanti.
⚙️ 3. Pengaturan Konfigurasi Utama
Secara baku, Tailwind akan menggunakan metode "media" (Mengikuti jam HP/Laptop). Jika kamu ingin membuat tombol
saklar khusus di atas, kamu WAJIB mengubah satu baris kecil di file tailwind.config.js mu.
module.exports = { /* Ubah ini ke 'class' untuk mendukung Tombol Saklar manual */ darkMode: 'class', content: ["./src/**/*.{html,js}"], theme: { extend: {} }, plugins: [], }
📋 Intisari Dunia Malam
- Biasakan selalu merancang warna Terang (Siang) terlebih dahulu.
- Tambahkan kata sakti
dark:tepat di depan class warna yang ingin dirubah. Fitur ini paling sering digunakan padabg-...,text-..., danborder-.... - Ganti metode
darkMode: 'class'di file konfigurasi jika kamu ingin memberi pengguna kebebasan menekan tombol Saklar Malam. Kemudian di Javascript mu, kamu tinggal membuat tombol tersebut memasukkan tulisanclass="dark"ke Body HTML.