Simple dark/light mode toggle with Nuxt and Tailwind

Not sure what I am doing wrong, but I cannot manage for Tailwind to respect the "dark" class on my "html" element. It's set properly and my tailwind.config.js contains

darkMode: "class"

darkMode: "class"

(tried other values too), but when I inspect my page tailwind still uses prefers-color-scheme selectors. I've also tried

tailwindcss: {
    config: {
      darkMode: 'class',
      content: [
        './app.vue'
      ]
    }
  }

tailwindcss: {
    config: {
      darkMode: 'class',
      content: [
        './app.vue'
      ]
    }
  }

to no avail.

ChatGPT and other AIs are also not able to create a minimal working project where an element with e.g. classes

text-black dark:text-white

text-black dark:text-white

actually works. Any help is much appreciated!

Nuxt•9mo ago•

5 replies

Jonas

Simple dark/light mode toggle with Nuxt and Tailwind

Not sure what I am doing wrong, but I cannot manage for Tailwind to respect the "dark" class on my "html" element. It's set properly and my tailwind.config.js contains

darkMode: "class"

darkMode: "class"

(tried other values too), but when I inspect my page tailwind still uses prefers-color-scheme selectors. I've also tried

tailwindcss: {
    config: {
      darkMode: 'class',
      content: [
        './app.vue'
      ]
    }
  }

tailwindcss: {
    config: {
      darkMode: 'class',
      content: [
        './app.vue'
      ]
    }
  }

to no avail.

ChatGPT and other AIs are also not able to create a minimal working project where an element with e.g. classes

text-black dark:text-white

text-black dark:text-white

actually works. Any help is much appreciated!

Simple dark/light mode toggle with Nuxt and Tailwind

Similar Threads

Simple dark/light mode toggle with Nuxt and Tailwind

Similar Threads

Similar Threads

Similar Threads