Tailwind CSS Dark Mode Not Working as Expected

Question

I’m using Tailwind CSS to implement a dark mode toggle in my React application, but I'm encountering issues with the color not switching correctly between light and dark modes. The dark mode looks fine, but the light mode doesn't work as expected.

here is my setup:

tailwind config :

/** @type {import('tailwindcss').Config} */
export default {
 content: [
 "./index.html",
 "./src/**/*.{js,ts,jsx,tsx}",
 ],
 darkMode: 'class',
 theme: {
 extend: {
 colors: {
 headingColor: {
 light: "#4F46E5",
 dark: "#A5B4FC"
 }
 }
 },
 },
 plugins: [],
}

Pricing component :

const Pricing = () => {
 return (
 <div className="text-black dark:text-white p-8 rounded-lg border border-black dark:border-[#7B8595] shadow-lg max-w-3xl mx-auto bg-white dark:bg-gray-800 ">
 <h2 className="text-xl font-semibold mb-2 text-headingColor">
 API Pricing
 </h2>
 <p className="mb-6 text-sm">
 Our API pricing is based on the model used and the number of tokens
 processed. Here's a breakdown of the costs:
 </p>
 <div className="overflow-x-auto">
 <table className="w-full text-left overflow-hidden rounded-xl text-sm ">
 <thead>
 <tr className="bg-indigo-500 text-white">
 <th className="p-3 font-semibold">API</th>
 <th className="p-3 font-semibold">MODEL</th>
 <th className="p-3 font-semibold">PRICE PER 1K TOKENS</th>
 </tr>
 </thead>
 <tbody>
 <tr className="border-t border-gray-700">
 <td className="p-3">OpenAI</td>
 <td className="p-3">GPT-3.5</td>
 <td className="p-3">0ドル.002</td>
 </tr>
 <tr className="border-t border-gray-700">
 <td className="p-3">OpenAI</td>
 <td className="p-3">GPT-4</td>
 <td className="p-3">0ドル.03</td>
 </tr>
 <tr className="border-t border-gray-700">
 <td className="p-3">Together AI</td>
 <td className="p-3">Llama-2-70b</td>
 <td className="p-3">0ドル.0008</td>
 </tr>
 <tr className="border-t border-gray-700">
 <td className="p-3">Together AI</td>
 <td className="p-3">Llama-2-13b</td>
 <td className="p-3">0ドル.0006</td>
 </tr>
 </tbody>
 </table>
 </div>
 <div className="mt-6">
 <h3 className="text-lg font-semibold mb-2 dark:text-headingColor-dark text-headingColor-light ">
 Token Estimation
 </h3>
 <p className="mb-4 text-sm">
 On average, 1 token is approximately 4 characters or 0.75 words. For
 precise pricing, we recommend using our token calculator tool.
 </p>
 <h3 className="text-lg font-semibold mb-2 dark:text-headingColor-dark text-headingColor-light">
 Billing
 </h3>
 <p className="text-sm">
 You will only be charged for the tokens used in generating the book.
 The API tracks token usage and bills accordingly. Detailed usage
 reports are available in your account dashboard.
 </p>
 </div>
 </div>
 )
}
export default Pricing

Theme toggle :

import { useState, useEffect } from 'react'
const ThemeToggle = () => {
 const [isDarkMode, setIsDarkMode] = useState<boolean>(false)
 useEffect(() => {
 const root = window.document.documentElement
 if (isDarkMode) {
 root.classList.add('dark')
 } else {
 root.classList.remove('dark')
 }
 }, [isDarkMode])
 return (
 <button
 onClick={() => setIsDarkMode(!isDarkMode)}
 className="p-2 rounded-full bg-gray-200 dark:bg-gray-800"
 aria-label="Toggle Dark Mode"
 >
 {/* SVG Icons */}
 </button>
 )
}
export default ThemeToggle

App component:

import Pricing from './Components/Pricing'
import ThemeToggle from './Components/ThemeToggle'
export default function App() {
 return (
 <div className="min-h-screen bg-white dark:bg-gray-900 pt-10 pb-10">
 <Pricing />
 <ThemeToggle />
 </div>
 )
}

This is my setup

I've tried checking for conflicting CSS and using Tailwind’s ! modifier, but the problem persists. The Pricing component's colors should change, but it doesn’t seem to switch correctly. There is no global custom CSS conflict. Why does this not work.

• Wongjn: I replicated your code in a StackBlitz project but it seems to function as I would expect.

Answer 1

Try the following

In tailwind.config.css set the darkMode to class

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

<!-- Dark mode not enabled -->
<html>
<body>
 <!-- Will be white -->
 <div class="bg-white dark:bg-black">
 <!-- ... -->
 </div>
</body>
</html>
<!-- Dark mode enabled -->
<html class="dark">
<body>
 <!-- Will be black -->
 <div class="bg-white dark:bg-black">
 <!-- ... -->
 </div>
</body>
</html>

• Tolga Köseoğlu: That worked. Thank you. How did you figure that out? It's not in the documentation

Answer 2

my tailwind.config.ts was just like:

module.exports = withUt({
 darkMode: ['class'],

then i removed the third bracket and it didn't show any errors:

module.exports = withUt({
 darkMode: 'class',

• rozsazoltan: Yeah, same answer: stackoverflow.com/a/78879015/15167500
• rozsazoltan: Btw question doesn't mentioned ['class']