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

thereturning•3mo ago

i fixed it

Ivо•3mo ago

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

$darkTechBro•3mo ago

How?

thereturning•3mo 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•2mo 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