Issues with implementing Dark mode in TailwindCSS with Nuxt.js

Question

Issues with implementing Dark mode in TailwindCSS with Nuxt.js

After spending a couple of days on this, I'm still struggling to get the dark mode working with Tailwind CSS in Nuxt.js. It seems like there might be an issue with the CSS setup rather than the TypeScript side, especially since I have a toggle that switches the <html></html> class between light and dark modes.

I've been trying to follow Fayazara's work as reference, which you can check out here.

Here are my environment details:

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

Below are some snippets from my configuration files:

nuxt.config.js:

// Your nuxt config settings here

tailwind.config.js:

// Your tailwind config settings here

~/assets/css/tailwind.css:

// Your custom CSS styles here

Despite all efforts, I still see the issue persisting in elements like

<p class="bg-blue-500 dark:bg-red-500">Settings</p>

, where the color remains blue even after toggling.

You can find my entire project on GitHub. Any help or guidance would be greatly appreciated!

javascript css typescript nuxt.js tailwind-css

Answer 1

Answer №1

It seems like you are currently using a third-party plugin to activate dark mode support. However, TailwindCSS 2.0 (which is the version you are using) already has built-in support for dark mode, eliminating the need for an additional plugin.

To enable dark mode without the plugin, update your tailwind.config.js file to include the following code:

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

This configuration will enable dark mode using the class name dark.

In your layouts/default file, ensure that you have the following structure:

<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>

The element

<div class="dark">

is responsible for applying the dark mode theme. Removing this element will switch back to light mode, while adding it back will restore dark mode.

For further information, refer to the Toggling dark mode manually section in the official TailwindCSS documentation.

Answer 2

It seems like you are currently using a third-party plugin to activate dark mode support. However, TailwindCSS 2.0 (which is the version you are using) already has built-in support for dark mode, eliminating the need for an additional plugin.

To enable dark mode without the plugin, update your tailwind.config.js file to include the following code:

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

This configuration will enable dark mode using the class name dark.

In your layouts/default file, ensure that you have the following structure:

<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>

The element

<div class="dark">

is responsible for applying the dark mode theme. Removing this element will switch back to light mode, while adding it back will restore dark mode.

For further information, refer to the Toggling dark mode manually section in the official TailwindCSS documentation.

Issues with implementing Dark mode in TailwindCSS with Nuxt.js

Answer №1

Similar questions

Embed a stackoverflow.com iframe within a jsbin

Positioning JQuery sliders

How do I return a <div> element to its initial state after JavaScript has made changes to it?

Ways to enlarge image size without compromising the image resolution?

The dimensions of the pop-up window in Chrome's JavaScript are not displaying correctly

Trouble encountered in adjusting the alignment of labels

The "Product URL" in Woocommerce is overlapping with the "Add to Cart" button

The equivalent of the $.curCSS method in jQuery version 1.10 is as follows:

Button styles that have been verified will not be shown in Firefox

When working with a set of objects, consider utilizing jQuery's InArray() method to effectively handle

What is the best way to eliminate borders on a span element so they collapse seamlessly?

Discovering the server endpoint for the Star Wars SWAPI API: a step-by-step guide

How to properly fill state values for testing components with React Testing Library?

What is the best way to send multiple variables to a url using jQuery ajax?

Setting a default action for an Ext.Ajax.request error situation

On mobile devices, the height of the absolutely positioned element is larger than its

Display a progress bar in Bootstrap with a labeled indicator positioned above the bar and background to the

Node.js/Express/Jade scripts failing to load in the expected order

What steps do I need to take in order to ensure that when the word Hello is entered, the resulting output will display e:1, h:1, l:2, o:1

I'm facing an issue with deploying my Nuxt project on cPanel