Nuxt•4mo ago

Tailwind just does not wanna go with darkMode = "class"

ColorMode package installed and configures Tailwindcss config file exposed darkMode = "class" set But at the end tailwind just does not care and look at systems preference no matte how much i change html's class with "dark" or "dark-mode" or "light" or "light-mode"

10 Replies

kapa.ai•4mo ago

Hi @Furkan09. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information in the knowledge sources, here are some key points to check for Tailwind's dark mode with Nuxt and @nuxtjs/color-mode: 1. Tailwind darkMode setting:
Your tailwind.config.js should have darkMode: 'class' set. This is correct for class-based dark mode switching. 2. @nuxtjs/color-mode configuration:
In your nuxt.config.ts, you should have the color mode module added and configured, for example:

   colorMode: {
     preference: 'dark', // or 'light'
   },

   colorMode: {
     preference: 'dark', // or 'light'
   },

This is shown in the sample config from the knowledge sources and is the correct way to set the default mode. The module will add or remove the dark class on the <html> element as needed, which is what Tailwind expects when using darkMode: 'class' Github Issue Example. 3. Exposing Tailwind config:
If you are exposing the Tailwind config via a Nuxt module, ensure that the darkMode: 'class' is set in the config passed to Tailwind, as shown in the module author guide:

   await installModule('@nuxtjs/tailwindcss', {
     config: {
       darkMode: 'class',
       // ...
     }
   })

   await installModule('@nuxtjs/tailwindcss', {
     config: {
       darkMode: 'class',
       // ...
     }
   })

Module Author Guide 4. Class on the correct element:
Tailwind expects the dark class to be on the <html> element (not dark-mode or light-mode). The color mode module should handle this automatically. If you manually toggle, ensure you use dark, not dark-mode. 5. No evidence of "dark-mode" or "light-mode":
The knowledge sources do not mention using dark-mode or light-mode classes. Only dark is recognized by Tailwind for dark mode. 6. Potential issues:
If Tailwind is still not responding, double-check: - The dark class is actually being applied to <html>. - There are no CSS specificity issues or overrides. - The Tailwind CSS is being loaded after any other global styles that might interfere. Summary:
If you have darkMode: 'class' in your Tailwind config, and @nuxtjs/color-mode is installed and configured, Tailwind should respond to the dark class on <html>. Do not use dark-mode or light-mode—only dark is recognized. If it still doesn't work, there may be a misconfiguration or a CSS loading order issue, but the knowledge sources do not provide further troubleshooting steps beyond these points. If you need to see a working example, the config in this Github Issue demonstrates a setup where dark mode works as expected. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@864502570155900929> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Furkan09OP•4mo ago

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config

export default defineNuxtConfig({
  compatibilityDate: '2025-05-15',
  devtools: { enabled: true },
  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/color-mode'],
  app: {
    head: {
      title: 'ÜFLÖDS',
      htmlAttrs: {
        lang: 'tr',
        class: ''
      },
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1.0' }
      ],
      link: [
        { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }
      ]
    },
  },
  tailwindcss: {
    exposeConfig: true,
    configPath: 'tailwind.config.js',
    cssPath: '~/assets/css/tailwind.css',
  },
  colorMode: {
      classSuffix: '',
      preference: 'light',
      fallback: 'light'
  },
})

tailwind.config.ts

module.exports = {
  purge: [],
  darkMode: 'class', // or 'media' or false
  content: [
    './components/**/*.{vue,js}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './app.vue',
    './plugins/**/*.ts'
  ],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

@kapa.ai

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: Sorry @Furkan09, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Furkan09OP•4mo ago

@kapa.ai

kapa.ai•4mo ago

Furkan09OP•4mo ago

@kapa.ai

kapa.ai•4mo ago

Cake•4mo ago

@Furkan09 remove the tailwind nuxt module, it's useless. Follow the installation from tw's docs, it has a nuxt section

Furkan09OP•4mo ago

I had switched to svelte for poject mind changed if somewhat decide to use nuxt insted ill try

Gaming

Programming

Tailwind just does not wanna go with darkMode = "class"

Did you find this page helpful?