Dark Mode

El prefijo dark: aplica estilos cuando el modo oscuro está activo. Puede activarse por clase en <html> o por preferencia del sistema (prefers-color-scheme).

dark: darkMode: 'class' darkMode: 'media'

Demo — pulsa el toggle arriba a la derecha

Cards con dark: variants

Título de tarjeta

El fondo, borde, texto y sombra cambian con dark.

etiqueta

Panel con colores semánticos que cambian en dark.

Nav con dark:

Inputs con dark:

Tipografía con jerarquía

text-gray-900 / dark:text-gray-50

text-gray-700 / dark:text-gray-200

text-gray-500 / dark:text-gray-400

text-gray-400 / dark:text-gray-600

Código importante

/* tailwind.config.js */
module.exports = {
  darkMode: 'class',  // o 'media'
  // ...
}

<!-- Activar dark mode en el HTML -->
<html class="dark"></html>

<!-- Toggle desde JS -->
document.documentElement.classList.toggle('dark')

<!-- Patrón light/dark para cualquier prop -->
<div class="bg-white       dark:bg-gray-900
       text-gray-900  dark:text-gray-100
       border-gray-200 dark:border-gray-700">
</div>

<!-- Imágenes en dark mode -->
<img class="block dark:hidden" src="light.png">
<img class="hidden dark:block" src="dark.png">

<!-- darkMode: 'media' (sin JS, usa el SO) -->
/* Se activa con prefers-color-scheme: dark */
/* No necesitas agregar la clase 'dark' */

<!-- Combinar dark + hover -->
<a class="dark:hover:bg-gray-800"></a>

<!-- Guardar preferencia en localStorage -->
const isDark = localStorage.getItem('dark') === 'true'
if (isDark) document.documentElement.classList.add('dark')