Following code is part of a next js project I am building. The code is written in TypeScript and I use tailwind css for my styling. I am trying to apply a styling to the scrollbar but it is not working. That is not in google chrome at least.

When I opened the app in DuckDuckGo it did work. I ofcourse thought caching would have been the problem but after clearing the cache I had no luck either.

here is part of my globals.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;


@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {

    border-radius: 5px !important;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  .custom-scrollbar::-webkit-scrollbar-corner {
      background: transparent;
  }

  .custom-scrollbar::-webkit-scrollbar-button {
      display: none;
  }

  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: black transparent;
  }

}

this is the element:

<div className="custom-scrollbar h-fit overflow-y-auto max-h-[calc(100vh-10rem)] flex flex-col items-center space-y-2 text-primary">

the .custom-scrollbar styles are applying but the pseudo elements are not working in chrome for some reason.(Chrome is up to date). When inspecting the element the css rules are there but they don’t work. Screenshot below:

Here is what it should look like: