**I am working on a Next.js project with tailwindcss and
if I try to use scrollbar-thin it negates the color,
and goes back to the browser default (chrome) scrollbar.
If any additional information needed, just tell me, I am new to this forum

I installed **

npm install --save-dev tailwind-scrollbar

added the plugin into my config

> plugins: [
> require('tailwindcss-textshadow'),
> require('tailwind-scrollbar-hide'),
> require('tailwind-scrollbar'),
> 
>   ],

global.css

> @tailwind base;
> @tailwind components;
> @tailwind utilities;
> 
> 
> 
> html, body, heading */
> @layer base {
> body {
>     @apply bg-[#141414] text-white
> !scrollbar-thin
> !scrollbar-thumb-red-600
>   }
> 
> header {
>     @apply fixed top-0 z-50 flex w-full 
> items-center justify-between px-4 
> py-4 transition-all lg:px-10 lg:py-6;
>   }
> }
> 
> custom classNames */
> @layer components {
>   .headerLink {
>     @apply cursor-pointer text-sm font-light text-[#e5e5e5] transition duration-[.4s] hover:text-[#b3b3b3];
>   }
> 
>   .bannerButton {
>     @apply flex items-center 
> gap-x-2 rounded 
> px-5 py-1.5 
> text-sm font-semibold 
> transition hover:opacity-75 
> md:py-2.5 md:px-8 md:text-xl;
>   }
> }