Modo oscuro

<< Pseudoclases

Para establecer estilos en un elemento cuando el navegador está en modo oscuro (prefers-scholor-scheme: dark) utilizamos la variante dark. Como el resto de variantes, se puede combinar con otras variantes como las de tamaño de pantalla, hover, etc.

Si en lugar de la configuración del dispositivo/navegador queremos utilizar una clase o atributo para indicar a Tailwind cuando aplicar el modo oscuro (por ejemplo, queremos poner un botón en la página para cambiarlo), se puede configurar así en el archivo CSS principal:

@import "tailwindcss";

/* Selector de clase */
@custom-variant dark (&:where(.dark, .dark *));

@import "tailwindcss";

/* Selector de atributo */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

Para sobrescribir estilos en modo oscuro en un elemento usamos la variante dark como hemos comentado antes:

<div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5">
  <!-- ... -->
</div>

<< Pseudoclases