Tailwind dark mode not working even after configuring — dark: classes are always active / take preference

Question

TailwindCSS version:

{
  "dependencies": {
    "tailwindcss": "^4.1.3",
  }
}

I'm using Tailwind CSS in a React project with the following configuration:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

In my components, I use dark mode utility classes like this:

<div className="bg-white text-black dark:bg-black dark:text-white">
  Hello
</div>

To toggle dark mode

const root = document.documentElement;
root.classList.toggle('dark', themeMode === 'dark');
localStorageUtil.setMode(themeMode);

Even when the dark class is not present on the element, the dark: styles (like dark:bg-black) are still applied as if dark mode is always enabled.

Answer 1

I think the light mode isn't working for you either. You don't notice this because the background is white and the text is black by default. So you assume that bg-white text-black is working correctly, but it's not.

• TailwindCSS dark mode can't change or add class="dark" tag on production - StackOverflow

Since January 2025, running npm install tailwindcss installs the new v4 version. There have been many breaking changes compared to v3. There are many outdated guides online, so use the official documentation for a proper installation.

• What's breaking changes from TailwindCSS v4? - StackOverflow

TailwindCSS v3

For this, you just need to install a version-specific package; everything else remains the same:

npm install tailwindcss@3

In this case, your legacy JavaScript-based configuration is set up correctly and will work.

The selector strategy replaced the class strategy in Tailwind CSS v3.4.1.

• Toggling dark mode manually - TailwindCSS v3 Docs

TailwindCSS v4

Here you need to clarify your React setup. You likely have two options:

• If you use Next.js: Next.js works with PostCSS, so you will need the new @tailwindcss/postcss plugin.
• If you run React without Next.js, for example with Vite: you can skip PostCSS and use the @tailwindcss/vite plugin directly.

Both installation methods have been detailed previously on Stack Overflow as well.

• Install TailwindCSS v4 with (1.) Next.js or (2.) Vite - StackOverflow
• Install TailwindCSS v4 with Next.js - TailwindCSS v4 Docs
• Install TailwindCSS v4 with Vite & React - TailwindCSS v4 Docs
• Install TailwindCSS v4 with React Router - TailwindCSS v4 Docs

If you are using the new stable v4, you need to get familiar with the new CSS-first configuration, since the tailwind.config.js file has been deprecated by default; although it's still possible to use it, but only theme.extend can be applied from it.

• New CSS-first configuration option in v4 - StackOverflow

To configure dark mode, you must override the dark: variant using the @custom-variant directive:

• @custom-variant directive - TailwindCSS v4 Docs
• Toggling dark mode manually - TailwindCSS v4 Docs

./src/app.css

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));