🌗 Tailwind Dark Mode v3 - Modo "class"

🧠 ¿Cómo funciona el modo class?

Este modo requiere que manualmente añadas o quites la clase dark en el elemento raíz (usualmente <html> o <body>).

Se debe configurar explícitamente en el archivo tailwind.config.js:

module.exports = {
  darkMode: 'class',
  content: ["./*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

🎨 Comparación Visual

🌞 Estilo Claro
🌚 Estilo Oscuro Manual
🌓 Modo Dinámico (Tailwind)

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

Se usaba una clase dark en el elemento raíz y estilos CSS tradicionales:

<style>
  .dark .box-dark {
    background-color: black;
    color: white;
  }
</style>

<div class="box-dark">
  Texto que cambia según la clase .dark
</div>

⚡ ¿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>

🕹️ Activar/Desactivar con JavaScript

Este botón alterna la clase dark en el elemento raíz (<html>). 

document.documentElement.classList.toggle('dark')