Dark Mode — Tailwind CSS

Tailwind mendukung dark mode dengan prefix dark:: Otomatis berubah sesuai tema Strategi dark mode: media (default) — mengikuti prefers-color-scheme sistem class

Tailwind mendukung dark mode dengan prefix dark::

<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
  Otomatis berubah sesuai tema
</div>

Strategi dark mode:

  1. media (default) — mengikuti prefers-color-scheme sistem
  2. class — diaktifkan dengan menambahkan class dark pada <html>
// tailwind.config.js
module.exports = {
  darkMode: "class", // atau "media"
}

Pattern umum:

<div class="bg-white dark:bg-gray-800
            text-gray-900 dark:text-gray-100
            border-gray-200 dark:border-gray-700">
  Konten yang adaptif
</div>

Tips: Selalu tes kedua mode. Gunakan dark: untuk setiap property warna.

Yang akan kamu pelajari