Tailwind css dark class is not working with @nuxt.js/colorMode

[Amir Safari]

Hi
I use the @nuxtjs/tailwind and @nuxtjs/colorMode for my project when trying to use the dark mode I did all the steps in the documentation but what happens is when I read the value with $colorMode.value the colorMode.value is changing with my toggle but my page styling is stuck on the dark mode (since my system prefrence is dark). Is it sth I dont wrong or is there an issue here that needs to be addressed in the bug section ?

[Inesh Bose]

Can you provide a reproduction of your issue please?

I'm linking the documentation for the two to help you ensure that we're on the right page -

1. https://color-mode.nuxtjs.org/#tailwindcss
2. https://tailwindcss.nuxtjs.org/examples/dark-mode

[Chandler Wilcox]

I'm having a similar issue. I installed the package like the documentation said and it adds the correct classes to the html element. The select toggles the class as well but the dark more is always in light mode.

tailwind.config.js

// import konstaConfig config
const konstaConfig = require('konsta/config');

// wrap config with konstaConfig config
const config = konstaConfig({
  content: [
    './components/*.{js,ts,jsx,vue}',
    './pages/*.{js,ts,jsx,vue}',
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
});

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  build: {
    transpile: ['konsta'],
  },
  modules: [
    '@nuxtjs/tailwindcss',
    'nuxt-icon',
    '@nuxtjs/color-mode'
  ],
  colorMode: {
    classSuffix: ''
  }
})

pages/index.vue

<template>
  <k-page>
    <select
      v-model="colorMode.preference"
      class="border w-24 h-8 dark:bg-gray-900 dark:text-white dark:border-gray-700"
    >
      <option value="system">System</option>
      <option value="light">Light</option>
      <option value="dark">Dark</option>
    </select>
  </k-page>
</template>
<script setup>
// Tailwind Color-mode module init
const colorMode = useColorMode();
</script>

DOM when selecting dark mode:

[Inesh Bose]

I'm having a similar issue. I installed the package like the documentation said and it adds the correct classes to the html element. The select toggles the class as well but the dark more is always in light mode.

tailwind.config.js

// import konstaConfig config
const konstaConfig = require('konsta/config');

// wrap config with konstaConfig config
const config = konstaConfig({
  content: [
    './components/*.{js,ts,jsx,vue}',
    './pages/*.{js,ts,jsx,vue}',
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
});

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  build: {
    transpile: ['konsta'],
  },
  modules: [
    '@nuxtjs/tailwindcss',
    'nuxt-icon',
    '@nuxtjs/color-mode'
  ],
  colorMode: {
    classSuffix: ''
  }
})

@chandlerwilcox88 are you default exporting the config?