🌗 Tailwind Dark Mode v4 - Modo "media"

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

Tailwind v4 ya viene configurado para aplicar modo oscuro automáticamente usando la preferencia del usuario a través de prefers-color-scheme. No necesitas configurar nada.

⚙️ ¿Qué configuración necesita?

Ninguna. En Tailwind CSS v4, el modo dark basado en media query es el comportamiento por defecto. Ya no se requiere archivo tailwind.config.js ni configuración en index.css.

🎨 Comparación Visual

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

Se usaban media queries manuales para detectar el tema del sistema:

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

⚡ ¿Cómo se hace ahora con Tailwind?

Solo debes usar el prefijo dark: en las clases de utilidad:

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

🧪 ¿Cómo probar el modo oscuro?

• Ve a la configuración de tu sistema operativo (Windows, macOS o Linux).
• Activa el tema oscuro desde la sección de Apariencia o Personalización.
• Recarga esta página y observa cómo cambia automáticamente.
• También puedes simularlo desde las herramientas del navegador:

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