**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
npm install tailwind-scrollbar-hide

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;
   }
 }