Examples
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:
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...