Tailwind dark mode not working

[razzeee]

Hey,

I'm using tailwind and am setting the toaster up like this.

 <Toaster
          position="top-right"
          toastOptions={{
            className:
              'bg-slashwhy-primary-white text-slashwhy-primary-black dark:bg-slashwhy-primary-black dark:text-slashwhy-primary-white rounded-2xl shadow-md',
          }}
          containerStyle={{
            top: 76,
            right: 24,
            bottom: 24,
            left: 24,
          }}
        />

The dark mode works if I run my site (it's a redwood site) in dev . But as soon as I deploy it, only the notifications become styled like it's the light theme.

I'm not sure what could be causing this.

[timolins]

Hi @razzeee. Try double checking if your "dark:*" classes exists in the DevTools. I'd imagine there is a problem with Tailwind not detecting your darkmode classes in production builds.

I'll close this issue for now, as it's not related to RHT. But feel free to share your solution if you solve it.

[razzeee]

As stated, all of the page is in dark mode, but the notifications are not, so this seems specific to the toasts.

[razzeee]

These seem to be overwriting my styles, as they are inline styles and have a higher priority

https://github.com/timolins/react-hot-toast/blob/28194c5946339680950dda67f56332ad69de6261/src/components/toast-bar.tsx#L24

[biplobsd]

<Toaster
  toastOptions={{
    className:
      "ring ring-base-content !tracking-wider !font-bold !bg-base-300/40 !backdrop-blur !text-base-content",
  }}
/>

@razzeee It worked for me.

[razzeee]

@biplobsd your example isn't even using dark: ?

[razzeee]

But you are right. it needs to be forced for every style, I didn't even notice, it not working correcly for the light style (as our changes are minimal)

But forcing everything seems to work fine now:

 toastOptions={{
            className:
              '!bg-primary-white !text-primary-black dark:!bg-primary-black dark:!text-primary-white !rounded-2xl !shadow-md',
          }}

[biplobsd]

Oh, sorry, @razzeee, I forgot to reply. I was using DaisyUI for more styling. That is why I did not use the dark utility. Yes, forcing with the ! (exclamation) (important modifier) Tailwind then renders as important style.

[softmarshmallow]

I can confirm that tailwindcss is not working with toastOptions#className

[simPod]

Tailwind is working with it. Just fix your codebase scan (config.content).