How to change scrollbar when using Tailwind (next.js/react)

Tailwind CSS doesn’t provide a built-in way to customise the scrollbar styling. However, you can use the various ::-webkit-scrollbar pseudo-elements to style it.

Tailwind playground link: https://play.tailwindcss.com/5samiwyr4v.

@layer utilities {
  .scrollbar::-webkit-scrollbar {
    width: 20px;
    height: 20px;
  }

  .scrollbar::-webkit-scrollbar-track {
    border-radius: 100vh;
    background: #f7f4ed;
  }

  .scrollbar::-webkit-scrollbar-thumb {
    background: #e0cbcb;
    border-radius: 100vh;
    border: 3px solid #f6f7ed;
  }

  .scrollbar::-webkit-scrollbar-thumb:hover {
    background: #c0a0b9;
  }
}