🌗 Tailwind Dark Mode v4 - 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>).

En Tailwind CSS v4, no se usa tailwind.config.js para esto. Debes configurarlo directamente en index.css así:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

Esto permite que todas las clases con el prefijo dark: funcionen dentro de elementos que tengan la clase dark.

🎨 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')