Dark Mode - 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:

tailwind.config.ts

import type { Config } from 'tailwindcss'

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

And, add the classSuffix to the colorMode module options:

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss',
    '@nuxtjs/color-mode'
  ],
  colorMode: {
    classSuffix: ''
  }
})

See the working demo below:

Loading Sandbox...

Basic Usage

Live example of basic usage of Nuxt and Tailwind CSS.

Nuxt UI

Live example of Nuxt UI with Nuxt Tailwind.