Content
Alternative scrollbar designs for the browser's scrollbar.
The following example creates a thin (8px wide [&::-webkit-scrollbar]:w-2
) scrollbar, which has a gray track/bar color [&::-webkit-scrollbar-track]:bg-gray-100
and a darker-gray [&::-webkit-scrollbar-thumb]:bg-gray-300
handle
<div class="max-h-[400px] overflow-y-auto
[&::-webkit-scrollbar]:w-2
[&::-webkit-scrollbar-track]:bg-gray-100
[&::-webkit-scrollbar-thumb]:bg-gray-300
dark:[&::-webkit-scrollbar-track]:bg-slate-700
dark:[&::-webkit-scrollbar-thumb]:bg-slate-500">
...
</div>
Add rounded corners to track/bar [&::-webkit-scrollbar-track]:rounded-full
and to the handle [&::-webkit-scrollbar-thumb]:rounded-full
<div class="max-h-[400px] overflow-y-auto
[&::-webkit-scrollbar]:w-2
[&::-webkit-scrollbar-track]:rounded-full
[&::-webkit-scrollbar-track]:bg-gray-100
[&::-webkit-scrollbar-thumb]:rounded-full
[&::-webkit-scrollbar-thumb]:bg-gray-300
dark:[&::-webkit-scrollbar-track]:bg-slate-700
dark:[&::-webkit-scrollbar-thumb]:bg-slate-500">
...
</div>