how to style scrollbar with tailwind

@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 */
  }

@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>