Dark Mode

Live example of dark mode with Nuxt Tailwind.

This is an example using the Tailwind Dark Mode and @nuxtjs/color-mode module.

To make it work hand-in-hand, you need to update your tailwind.config by adding the following:

import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  darkMode: 'class'

And, add the classSuffix to the colorMode module options:

export default defineNuxtConfig({
  modules: [
  colorMode: {
    classSuffix: ''

See the working demo below:

Loading Sandbox...

Copyright © 2023