Tailwindcss (v4) dark mode no working as expected

[pangeaos]

The only way I found to get tailwindcss dark mode working is forcing the class Names.

layout.tsx
<Toaster position="top-center" toastOptions={{ className: '!bg-gray-900 dark:!bg-white !text-white dark:!text-secondary', }} />

global.css
@import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:where(.dark, .dark *));

According to the attached image it seems that this class is overwriting the taildwind classes.