[Docs] TailwindCSS `dark` with Docus theme toggle

[PGimenez]

I'm trying to add components that have a dark mode option via TW's dark: tag. However, when switching to a dark theme via the button on the navbar the dark option is not activated. This is working on another Nuxt site I have using the Maya template

Here's an example with Docus:

<h1 class="font-semibold text-lg inline-block text-black dark:text-white font-bold"> aaaaaaa </h1>

[tailwind test]{.text-red-800 .dark:text-white}

gh repo: https://github.com/PGimenez/docus-starter deployed site: https://dynamic-monstera-0a200c.netlify.app/

I've also tried adding a manual toggle using the colormode plugin, but no luck.

These are my config files in the example:

nuxt.config.ts

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

import { Config } from 'tailwindcss'

export default <Config>{
    content: [
        'components/**/*.{vue,ts,tsx}',
        'content/**/*.md',
        'layouts/**/*.vue',
        'pages/**/*.vue',
        'composables/**/*.ts',
        'plugins/**/*.ts',
        'app.vue'
    ],
}

module.exports = {
  darkMode: 'class',
}

[Tahul]

@bdrtsky could you look into this?

I think we do use proper mode with @nuxtjs/color-mode.

https://github.com/PGimenez/docus-starter/blob/94aed62e5c8945e5ebd044bcb1eae199f3b1440e/tailwind.config.ts#L15-L17

Also there, I think the export default should actually contain the darkMode key as well?

[PGimenez]

Also there, I think the export default should actually contain the darkMode key as well?

I also tried having it in both the default export and module.exports, although here it says only the latter is needed.

[Tahul]

Hello @PGimenez ; do you still encounter this issue?