N
Nuxt•3mo ago
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" (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 actually works. Any help is much appreciated!
3 Replies
kapa.ai
kapa.ai•3mo ago
Hi @Jonas. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To implement a simple dark/light mode toggle in Nuxt with Tailwind CSS (using darkMode: 'class'), you should ensure the following: 1. Tailwind Config: Your tailwind.config.js should have darkMode: 'class' set. 2. Dark Class Placement: The dark class should be applied to the <html> or <body> element, as Tailwind will look for this class to apply dark mode styles. 3. Nuxt Color Mode Integration: If you use Nuxt UI or the @nuxtjs/color-mode module, it will handle toggling the dark class for you and provide a composable to switch modes. Example with Nuxt UI and Tailwind 1. Install Nuxt UI (which auto-installs @nuxtjs/color-mode): 
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
})
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
})
2. Tailwind config: 
// tailwind.config.js
module.exports = {
  darkMode: 'class',
  content: [
    './app.vue',
    './components/**/*.{vue,js,ts}',
    './pages/**/*.{vue,js,ts}',
  ],
  // ...other config
}
// tailwind.config.js
module.exports = {
  darkMode: 'class',
  content: [
    './app.vue',
    './components/**/*.{vue,js,ts}',
    './pages/**/*.{vue,js,ts}',
  ],
  // ...other config
}
3. Use the color mode composable to toggle: 
<script setup>
const colorMode = useColorMode()
</script>

<template>
  <button @click="colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'">
    Toggle Dark/Light
  </button>
  <div class="text-black dark:text-white">
    This text is black in light mode and white in dark mode.
  </div>
</template>
<script setup>
const colorMode = useColorMode()
</script>

<template>
  <button @click="colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'">
    Toggle Dark/Light
  </button>
  <div class="text-black dark:text-white">
    This text is black in light mode and white in dark mode.
  </div>
</template>
This will toggle the dark class on the <html> element, and Tailwind will apply the correct styles. You do not need to manually manage the dark class if you use Nuxt UI or @nuxtjs/color-mode—they handle it for you automatically. If you want a ready-made toggle, you can use the <UColorModeSwitch /> component from Nuxt UI: 
<template>
  <UColorModeSwitch />
</template>
<template>
  <UColorModeSwitch />
</template>
Nuxt UI Color Mode Usage
UColorModeSwitch Component 4. CSS Example: 
/* assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-bg: var(--ui-color-neutral-50);
  --ui-text: var(--ui-color-neutral-900);
}
.dark {
  --ui-bg: var(--ui-color-neutral-950);
  --ui-text: var(--ui-color-neutral-50);
}
/* assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";

:root {
  --ui-bg: var(--ui-color-neutral-50);
  --ui-text: var(--ui-color-neutral-900);
}
.dark {
  --ui-bg: var(--ui-color-neutral-950);
  --ui-text: var(--ui-color-neutral-50);
}
CSS Variables and Dark Mode --- Summary:
If you use Nuxt UI or @nuxtjs/color-mode, and your Tailwind config is correct, toggling dark/light mode will work out of the box. The dark class is managed for you, and Tailwind will respect it. If you are not using these modules, you must manually add/remove the dark class on the <html> element for Tailwind to apply dark styles. If you still see prefers-color-scheme selectors being used, double-check that you are not using darkMode: 'media' anywhere, and that the dark class is present on the <html> or <body> element when you expect dark mode to be active. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@170646731699126272> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Jonas
JonasOP•3mo ago
Was my CSS file, thanks!

Did you find this page helpful?