TailwindCSS Dark mode not working in Nuxt.js

user_13029550 0
Viewed 1971

I've been at this for a couple of days now and still can't seem to get this working. I'm trying to get the whole dark mode going with Tailwind CSS in Nuxt.js.

I think it may be an issue with the CSS setup and not the TypeScript side as I have a toggle that switches the <hmtl></html> class to light and dark.

As a reference, I've been trying to copy Fayazara's work which you can find here.

Env:

  • Windows 10 Pro
  • Node 14.15.4
  • NPM 6.14.10
  • Nuxt.js 2.14.12
  • TailwindCSS 2.0.2

Here are some of the config files:

nuxt.config.js:

export default {
    head: {
        // meta stuff
    },
    purgeCSS: {    
        whitelist: ['dark-mode'],  
    },
    components: true,
    buildModules: [
        '@nuxt/typescript-build',
        '@nuxtjs/tailwindcss',
        '@nuxtjs/color-mode',      
    ],
    colorMode: {
        classSuffix: ""
    },
    ...
    ...
}

tailwind.config.js:

module.exports = {
    theme: {
        darkSelector: '.dark-mode',
    },
    variants: {
        backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd', 'hover', 'responsive'],
        borderColor: ['dark', 'dark-focus', 'dark-focus-within', 'hover', 'responsive'],
        textColor: ['dark', 'dark-hover', 'dark-active', 'hover', 'responsive']
    },
    plugins: [
        require('tailwindcss-dark-mode')()
    ]
}

~/assets/css/tailwind.css:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

I have this in my settings page <p class="bg-blue-500 dark:bg-red-500">Settings</p> which stays blue even with the toggle

I uploaded my project to GitHub for all the other files

Thanks to anyone that helps :)

nuxt.js tailwind-css typescript css javascript
1 Answers

Looks like you're using a third party plugin to enable dark mode support. TailwindCSS 2.0 (Which you're using) supports dark mode on its own, so no need to add the plugin.

Change your tailwind.config.js to:

// tailwind.config.js
module.exports = {
  darkMode: 'class',
}

That enables dark mode via the class dark.

Then in layouts/default you have:

<template>
    <div class="dark">
        <Navigation />
        <Nuxt />
    </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Navigation from '~/components/Navigation.vue'
export default Vue.extend({
    name: 'Default',
    components: {
        Navigation
    }
})
</script>

That <div class="dark"> is making everything dark.

Remove that and everything will be light mode. Add it back and everything will be dark mode.

For more info see Toggling dark mode manually from the TailwindCSS docs.

user_54038820
Related