[v4] Styles doesn't apply on dark mode

[jus1d]

In my case, I have dark mode setting: @custom-variant dark (&:is(.dark *));, and it works perfectly

But i noticed that when im applying default styles, like bg-blue-500, they are applying only for light theme, and when Im toggling dark one, they are not visible. So i have to do things like bg-blue-500 dark:bg-blue-500

[wongjn]

I was unable to replicate the behavior in this Tailwind Play which would suggest it is something particular to your project. Consider providing a project that reproduces the unexpected behavior.

[jus1d]

Here it is: https://github.com/voidcontests/frontend/tree/tailwind/v4

Or may be you have any ideas, why this can be a case?

[wongjn]

Your default CVA button variant has dark: classes defined on it, so these will be applied to the <Button> in the <TonConnectButton> component:

const buttonVariants = cva(
  "…",
  {
    variants: {
      variant: {
        default: "… dark:bg-zinc-50 dark:text-zinc-950",

[jus1d]

Your default CVA button variant has dark: classes defined on it, so these will be applied to the <Button> in the <TonConnectButton> component:

const buttonVariants = cva(
  "…",
  {
    variants: {
      variant: {
        default: "… dark:bg-zinc-50 dark:text-zinc-950",

Ahhh, yes, really sorry

[jus1d]

Your default CVA button variant has dark: classes defined on it, so these will be applied to the <Button> in the <TonConnectButton> component:

const buttonVariants = cva(
  "…",
  {
    variants: {
      variant: {
        default: "… dark:bg-zinc-50 dark:text-zinc-950",

Thanks a lot!

[jus1d]

I met this thing here, for greater accuracy

https://github.com/voidcontests/frontend/blob/tailwind/v4/src/components/ton-connect/button.tsx#L46