🌗 Tailwind Dark Mode v3 - Modo "media"

¿Cómo funciona el modo oscuro por media query?

Tailwind puede detectar automáticamente la preferencia de tema del usuario mediante prefers-color-scheme y aplicar las clases con dark: si está activo el modo oscuro en el sistema.

Configuración en `tailwind.config.js`

module.exports = {
  darkMode: 'media', // Detecta automáticamente la preferencia del usuario
}

🧪 Ejemplos Visuales

Estilo claro (sin modo oscuro)

Estilo oscuro (explícito, sin dark mode)

Estilo claro con modo oscuro automático (usando dark:)

🎨 ¿Cómo se hacía antes con CSS?

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

⚡ ¿Cómo se hace ahora con Tailwind?

Solo usa dark: como prefijo en tus utilidades:

<div class="bg-white text-black dark:bg-black dark:text-white">
  Contenido dinámico con dark mode
</div>

🧪 Cómo activar o desactivar el modo oscuro

Abre la configuración del sistema (Windows/macOS/Linux).
Busca la sección de "Apariencia" o "Tema".
Activa el modo oscuro y recarga la página para ver el cambio.
También puedes simularlo desde las DevTools en Chrome/Firefox:

DevTools > Command Palette (Ctrl+Shift+P) > "Toggle dark mode"