v4 dark mode isn't overriding color

[bd-cbasmajian]

I'm trying to migrate from v3 -> v4, and dark mode variants are behaving unpredictably.
In some of my components, when I define a dark mode variant, sometimes the colors applied if the default color uses opacity.

So, for example, this works in dark mode:

@import "tailwindcss";
@variant dark (&:where(.dark, .dark *));

@layer components {
  .foobar {
    @apply text-blue-500;
    @variant dark {
      @apply text-green-500/50;
    }
  }
}

But this doesn't:

@import "tailwindcss";
@variant dark (&:where(.dark, .dark *));

@layer components {
  .foobar {
    @apply text-blue-500/50;
    @variant dark {
      @apply text-green-500/50;
    }
  }
}

Am I doing something wrong, or is this a known issue?

[wongjn]

Seems to be working in this Tailwind Play which would suggest it is something particular to your project. Conside providing a git repo that reproduces the unexpected behavior.

[bd-cbasmajian]

I can't reproduce it in Tailwind Play with a simple example, and my project is too complex to share. But looking at the dev console, I'm seeing the dark selector override the non-dark selector (which is correct), but then the dark selector gets overridden by this selector:

@supports (color: color-mix(in lab, red, red)) {
...
}

[wongjn]

What does it look like in the CSS file? It should look like one of:

@layer components {
  .foobar {
    color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
    }
    &:where(.dark, .dark *) {
      color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 50%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, var(--color-green-500) 50%, transparent);
      }
    }
  }
}

Or

@layer components {
  .foobar {
    color: #3080ff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .foobar {
      color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
    }
  }

  .foobar:where(.dark, .dark *) {
    color: #00c75880;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .foobar:where(.dark, .dark *) {
      color: color-mix(in oklab, var(--color-green-500) 50%, transparent);
    }
  }
}

In which either case, the it is expected that the @supports (color: color-mix(in lab, red, red)) should override, but override with the correct color.

[bd-cbasmajian]

What I'm getting is more like this:

@layer components {
  .foobar {
    color: color-mix(in srgb, #2b7fff 50%, transparent);
    &:where(.dark, .dark *) {
      color: var(--color-green-500);
    }
  }
  @supports (color: color-mix(in lab, red, red)) {
    .foobar {
      color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
    }
  }
}

[wongjn]

Interesting, that's all sorts of wrong. Consider providing a git repo that reproduces the unexpected behavior (doesn't have to be your project).

[bd-cbasmajian]

The error was in my project, my pipeline processes some 3rd party sass content, and I was running the tailwind generated css through that process. Once I removed the tailwind css from the sass processor, it worked fine.