Dark mode issue with ::-webkit-scrollbar-thumb (Tailwind v4)

[soyjuanmamoreno]

Hi everyone!

Since Laravel just updated to version 12 yesterday, I’ve been checking out the changes in Tailwind v4.

I’m trying to create a custom scrollbar that works both natively and with WebKit. However, I’m facing an issue: dark mode is not applying correctly to ::-webkit-scrollbar-thumb.

Here’s the code I’m using:

`
@layer base {
::-webkit-scrollbar {
width: 15px;
height: 15px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #ffff00;
    background-clip: content-box;
    border-width: 3px;
    border-style: solid;
    border-color: transparent;
    border-radius: calc(infinity * 1px);

    @variant dark {
        background-color: red;
    }
}

}
`

Additional details:

• I’m using Tailwind v4.
• Tested on Chrome and Firefox.
• I haven’t used @apply yet, as I want to ensure dark mode works properly first.

Issue:
The ::-webkit-scrollbar-thumb color doesn’t change when dark mode is enabled.

Question:
Am I applying the dark variant correctly in this case?

Thanks in advance for any help! 😊

[chrismaldona2]

Hello mate, I was facing the same problem and solved it like this:

@layer base {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    @apply bg-neutral-200;
  }
  ::-webkit-scrollbar-thumb {
    @apply bg-zinc-400;
  }
  ::-webkit-scrollbar-corner {
    @apply bg-neutral-200;
  }

  .dark {
    ::-webkit-scrollbar {
      @apply bg-neutral-900;
    }
    ::-webkit-scrollbar-thumb {
      @apply bg-neutral-800;
    }

    ::-webkit-scrollbar-corner {
      @apply bg-neutral-900;
    }
  }
}

For now this works, though I’m not sure if there’s a better solution.