how to style scrollbar with tailwind

this works

@layer utilities {
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

@layer utilities {
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

but webkit doesnt works

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .scrollbar::-webkit-scrollbar {
    width: 100px;
  }
}

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .scrollbar::-webkit-scrollbar {
    width: 100px;
  }
}

<div className="scrollbar flex flex-1 flex-col gap-1 overflow-auto">
      <Conversation />
      <Conversation />
 </div>

<div className="scrollbar flex flex-1 flex-col gap-1 overflow-auto">
      <Conversation />
      <Conversation />
 </div>

5 Replies

thereturningOP•6mo ago

i fixed it

Ivо•5mo ago

You can check this plugin out for more customizability: https://adoxography.github.io/tailwind-scrollbar/examples

$darkTechBro•5mo ago

How?

thereturningOP•5mo ago

/* conversations scrollbar */
    .scrollbar-conversations::-webkit-scrollbar {
      width: 8px;
    }
    .scrollbar-conversations::-webkit-scrollbar-thumb {
      background: purple;
      border-radius: 4px;
      min-height: 40px;
      background-clip: padding-box;
      border: 2px solid transparent;
    }
    .scrollbar-conversations::-webkit-scrollbar-track {
      background: transparent;
    }
    .scrollbar-conversations::-webkit-scrollbar-thumb {
      visibility: hidden;
    }
    .scrollbar-conversations:hover::-webkit-scrollbar-thumb {
      visibility: visible;
    }

/* conversations scrollbar */
    .scrollbar-conversations::-webkit-scrollbar {
      width: 8px;
    }
    .scrollbar-conversations::-webkit-scrollbar-thumb {
      background: purple;
      border-radius: 4px;
      min-height: 40px;
      background-clip: padding-box;
      border: 2px solid transparent;
    }
    .scrollbar-conversations::-webkit-scrollbar-track {
      background: transparent;
    }
    .scrollbar-conversations::-webkit-scrollbar-thumb {
      visibility: hidden;
    }
    .scrollbar-conversations:hover::-webkit-scrollbar-thumb {
      visibility: visible;
    }

if ur using daisyui, do this. this thing was overiding the webkit

 * {
      scrollbar-color: initial !important;
    }

 * {
      scrollbar-color: initial !important;
    }

capt_uhu•5mo ago

the "::-webkit-scrollbar-" stuff was removed from iOS Safari in version 14 and they still don't support the standard scrollbar-color/width/gutter stuff yet. Scrollbar styling on the web is a giant mess. But the beginnings of the clean up are on Interop 2024. so hopefully we're at least headed the right direction.

Gaming

Programming

how to style scrollbar with tailwind

Did you find this page helpful?