Dark mode class toggle not reflecting styles in Tailwind CSS v4

[DARK7177]

What version of Tailwind CSS are you using?

• v4.1.8

What build tool (or framework if it abstracts the build tool) are you using?

• Vite 6.3.5

What version of Node.js are you using?

• v22.3.0

What browser are you using?

• Chrome, Edge and Mozilla Firefox

What operating system are you using?

• Windows

Reproduction URL

https://github.com/DARK7177/crispy-garbanzo

Attached a repo for reproduction and the unexpected behavior encountered

Describe your issue

Tailwind v4 styles like dark: bg-black and dark: text-white do not apply consistently across components. The background may switch, but nested text elements or buttons do not reflect the dark mode styles.

Expected behavior
Toggling the dark class should apply all dark: prefixed classes immediately, just like it worked in Tailwind v3 with darkMode: 'class'.

Actual behavior

• Some elements (e.g., or wrappers) apply dark: styles correctly.
• However, elements inside custom React components do not change colors despite using dark:bg-* or dark: text-*.
• This happens even with transition-colors, duration-300, and correct class placement.

[wongjn]

It seems like you're trying to use a dark class name to toggle between dark and light mode. By default, Tailwind uses the prefers-color-scheme media query. So, to use a class name toggle instead, you'd need to configure Tailwind to do so:

-@import 'tailwindcss'
+@import 'tailwindcss';

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

[DARK7177]

Thank you for the reply to sir

Let me work upon this and update you soon