Tailwind CSS Dark Mode не работает, как и ожидалось ⇐ CSS

[Anonymous]

Я использую Tailwind CSS для реализации переключения темного режима в моем приложении React, но я сталкиваюсь с проблемами с цветом, неправильно переключающимся между светом и темными режимами. Темный режим выглядит нормально, но режим света не работает, как и ожидалось./** @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: [],
}

< /code>
Компонент ценообразования: < /p>
const Pricing = () => {
return (


API Pricing


Our API pricing is based on the model used and the number of tokens
processed. Here's a breakdown of the costs:





API
MODEL
PRICE PER 1K TOKENS




OpenAI
GPT-3.5
$0.002


OpenAI
GPT-4
$0.03


Together AI
Llama-2-70b
$0.0008


Together AI
Llama-2-13b
$0.0006





Token Estimation


On average, 1 token is approximately 4 characters or 0.75 words. For
precise pricing, we recommend using our token calculator tool.


Billing


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.


)
}

export default Pricing

< /code>
Theme Toggle: < /p>
import { useState, useEffect } from 'react'

const ThemeToggle = () => {
const [isDarkMode, setIsDarkMode] = useState(false)

useEffect(() => {
const root = window.document.documentElement
if (isDarkMode) {
root.classList.add('dark')
} else {
root.classList.remove('dark')
}
}, [isDarkMode])

return (
setIsDarkMode(!isDarkMode)}
className="p-2 rounded-full bg-gray-200 dark:bg-gray-800"
aria-label="Toggle Dark Mode"
>
{/* SVG Icons */}

)
}

export default ThemeToggle
< /code>
Компонент приложения: < /p>
import Pricing from './Components/Pricing'
import ThemeToggle from './Components/ThemeToggle'

export default function App() {
return (



)
}

< /code>
Это моя настройка < /p>
Я попытался проверить конфликтующий CSS и использовать Tailwind! Модификатор, но проблема сохраняется. Цвета ценообразования должен измениться, но, похоже, он не переключается правильно. Там нет глобального пользовательского конфликта CSS. Почему это не работает.


Подробнее здесь: https://stackoverflow.com/questions/788 ... s-expected