Dark mode gets overridden by browser preference

[axmad22]

What version of Tailwind CSS are you using?

Tailwind :v4.1.4

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

tailwindcss/postcss: 4.1.4
postcss: 8.5.3
Angular: 19.2.0

What version of Node.js are you using?

nodejs: 20.12.2

What browser are you using?

browser: Version 135.0.7049.95 (Official Build) (64-bit)

What operating system are you using?

OS: Linux

Describe your issue

Started using version 4 and older versions did not have this problem am i missing something, the browser preference (light/dark) takes precedence over tailwind. I added a button that toggles dark class from html tag and still it does not want to switch to light mode. i even added the variant and nothing, as long as the browser has dark theme on with or without dark class it will remain in dark mode am also not using browser extension ex: dark-reader.

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@theme {
  --default-font-family: "Almarai";
  --breakpoint-sm: 37.5rem;
  --breakpoint-md: 60rem;
  --breakpoint-lg: 80rem;
  --breakpoint-xl: 90rem;
}

example code

<p class="text-red-900 dark:text-gray-400">Hello</p>

with or without the dark class in html header the browser will continue to overrides it by setting it to this

@media (prefers-color-scheme: dark) {
    .dark\:text-gray-400 {
        color: var(--color-gray-400);
    }
} 

Is there a work around this. thanks