content
Tailwind CSS Custom Scrollbar
Differently designed scrollbar as alternative to the browser's default scrollbar.
Class Name | Type | Description |
|---|---|---|
| vertical-scrollbar | Component | Adds vertical scrollbar style. |
| horizontal-scrollbar | Component | Adds horizontal scrollbar style. |
| rounded-scrollbar | Modifier | Adds rounded style. |
Use .vertical-scrollbar component class to add customize Scrollbar along y-axis.
Style the scrollbar with this tailwind modifier [&::-webkit-scrollbar]:, [&::-webkit-scrollbar-thumb]:, and [&::-webkit-scrollbar-track]:.
- Item 1
This is a description for Item 1. It contains some details about the first item on the list.
- Item 1-1
This is a description for Item 1-1. It provides additional information about the first sub-item.
- Item 1-2
This is a description for Item 1-2. It gives more details about the second sub-item.
- Item 2
This is a description for Item 2. It explains what the second item on the list is about.
- Item 3
This is a description for Item 3. It provides context for the third item on the list.
- Item 3-1
This is a description for Item 3-1. It gives more information about the first sub-item of Item 3.
- Item 3-2
This is a description for Item 3-2. It explains further about the second sub-item of Item 3.
<div class="vertical-scrollbar shadow max-h-56 w-full p-4">
<ul class="space-y-5">
<li>
<span class="text-base-content/90 font-semibold">Item 1</span>
<p class="text-base-content/80 mt-1 text-base">
This is a description for Item 1. It contains some details about the first item on the list.
</p>
</li>
<li>
<span class="text-base-content/90 font-semibold">Item 1-1</span>
<p class="text-base-content/80 mt-1 text-base">
This is a description for Item 1-1. It provides additional information about the first sub-item.
</p>
</li>
<li>
<span class="text-base-content/90 font-semibold">Item 1-2</span>
<p class="text-base-content/80 mt-1 text-base">
This is a description for Item 1-2. It gives more details about the second sub-item.
</p>
</li>
<li>
<span class="text-base-content/90 font-semibold">Item 2</span>
<p class="text-base-content/80 mt-1 text-base">
This is a description for Item 2. It explains what the second item on the list is about.
</p>
</li>
<li>
<span class="text-base-content/90 font-semibold">Item 3</span>
<p class="text-base-content/80 mt-1 text-base">
This is a description for Item 3. It provides context for the third item on the list.
</p>
</li>
<li>
<span class="text-base-content/90 font-semibold">Item 3-1</span>
<p class="text-base-content/80 mt-1 text-base">
This is a description for Item 3-1. It gives more information about the first sub-item of Item 3.
</p>
</li>
<li>
<span class="text-base-content/90 font-semibold">Item 3-2</span>
<p class="text-base-content/80 mt-1 text-base">
This is a description for Item 3-2. It explains further about the second sub-item of Item 3.
</p>
</li>
</ul>
</div>Use .horizontal-scrollbar component class to add customize Scrollbar along x-axis.
This is a description for Item 1. It contains some details about the first item on the list.
This is a description for Item 1-1. It provides additional information about the first sub-item.
This is a description for Item 1-2. It gives more details about the second sub-item.
This is a description for Item 2. It explains what the second item on the list is about.
This is a description for Item 3. It provides context for the third item on the list.
Item 3-1This is a description for Item 3-1. It gives more information about the first sub-item of Item 3.
Item 3-2This is a description for Item 3-2. It explains further about the second sub-item of Item 3.
<div class="horizontal-scrollbar shadow flex flex-row space-x-3 p-4">
<div class="min-w-0 shrink-0">
<span class="text-base-content/90 font-semibold">Item 1</span>
<p class="text-base-content/80 mt-1 w-40 text-base">
This is a description for Item 1. It contains some details about the first item on the list.
</p>
</div>
<div class="min-w-0 shrink-0">
<span class="text-base-content/90 font-semibold">Item 1-1</span>
<p class="text-base-content/80 mt-1 w-40 text-base">
This is a description for Item 1-1. It provides additional information about the first sub-item.
</p>
</div>
<div class="min-w-0 shrink-0">
<span class="text-base-content/90 font-semibold">Item 1-2</span>
<p class="text-base-content/80 mt-1 w-40 text-base">
This is a description for Item 1-2. It gives more details about the second sub-item.
</p>
</div>
<div class="min-w-0 shrink-0">
<span class="text-base-content/90 font-semibold">Item 2</span>
<p class="text-base-content/80 mt-1 w-40 text-base">
This is a description for Item 2. It explains what the second item on the list is about.
</p>
</div>
<span class="min-w-0 shrink-0">
<span class="text-base-content/90 font-semibold">Item 3</span>
<p class="text-base-content/80 mt-1 w-40 text-base">
This is a description for Item 3. It provides context for the third item on the list.
</p>
</span>
<span class="min-w-0 shrink-0">
<span class="text-base-content/90 font-semibold">Item 3-1</span>
<p class="text-base-content/80 mt-1 w-40 text-base">
This is a description for Item 3-1. It gives more information about the first sub-item of Item 3.
</p>
</span>
<span class="min-w-0 shrink-0">
<span class="text-base-content/90 font-semibold">Item 3-2</span>
<p class="text-base-content/80 mt-1 w-40 text-base">
This is a description for Item 3-2. It explains further about the second sub-item of Item 3.
</p>
</span>
</div>Use .rounded-scrollbar class with .vertical-scrollbar or .horizontal-scrollbar to make it rounded scrollbar.
- Item 1
This is a description for Item 1. It contains some details about the first item on the list.
- Item 1-1
This is a description for Item 1-1. It provides additional information about the first sub-item.
- Item 1-2
This is a description for Item 1-2. It gives more details about the second sub-item.
- Item 2
This is a description for Item 2. It explains what the second item on the list is about.
- Item 3
This is a description for Item 3. It provides context for the third item on the list.
- Item 3-1
This is a description for Item 3-1. It gives more information about the first sub-item of Item 3.
- Item 3-2
This is a description for Item 3-2. It explains further about the second sub-item of Item 3.
<div class="vertical-scrollbar rounded-scrollbar card max-h-56 w-full p-4">
<ul class="space-y-5 p-3">
<li>
<span class="text-base-content/90 font-semibold">Item 1</span>
<p class="text-base-content/80 mt-1 text-base">
This is a description for Item 1. It contains some details about the first item on the list.
</p>
</li>
<li>
<span class="text-base-content/90 font-semibold">Item 1-1</span>
<p class="text-base-content/80 mt-1 text-base">
This is a description for Item 1-1. It provides additional information about the first sub-item.
</p>
</li>
<li>
<span class="text-base-content/90 font-semibold">Item 1-2</span>
<p class="text-base-content/80 mt-1 text-base">
This is a description for Item 1-2. It gives more details about the second sub-item.
</p>
</li>
<li>
<span class="text-base-content/90 font-semibold">Item 2</span>
<p class="text-base-content/80 mt-1 text-base">
This is a description for Item 2. It explains what the second item on the list is about.
</p>
</li>
<li>
<span class="text-base-content/90 font-semibold">Item 3</span>
<p class="text-base-content/80 mt-1 text-base">
This is a description for Item 3. It provides context for the third item on the list.
</p>
</li>
<li>
<span class="text-base-content/90 font-semibold">Item 3-1</span>
<p class="text-base-content/80 mt-1 text-base">
This is a description for Item 3-1. It gives more information about the first sub-item of Item 3.
</p>
</li>
<li>
<span class="text-base-content/90 font-semibold">Item 3-2</span>
<p class="text-base-content/80 mt-1 text-base">
This is a description for Item 3-2. It explains further about the second sub-item of Item 3.
</p>
</li>
</ul>
</div>
