scrollbar-color

Examples

Setting the scrollbar color

Use utilities like scrollbar-thumb-sky-700 and scrollbar-track-sky-100 to control the colors of a scrollbar:

<div class="scrollbar-thumb-sky-700 scrollbar-track-sky-100 overflow-auto ...">  <!-- ... --></div>

You can set the thumb and track colors independently. If you set one without the other, the unset color defaults to transparent.

Changing the opacity

Use the color opacity modifier to control the opacity of an element's scrollbar colors:

<div class="scrollbar-thumb-slate-900/60 scrollbar-track-slate-900/10 ...">  <!-- ... --></div>

Using a custom value

Use utilities like scrollbar-thumb-[<value>] and scrollbar-track-[<value>] to set scrollbar colors based on completely custom values:

<div class="scrollbar-thumb-[#0f766e] scrollbar-track-[#ccfbf1] ...">  <!-- ... --></div>

For CSS variables, you can also use the scrollbar-thumb-(<custom-property>) and scrollbar-track-(<custom-property>) syntax:

<div class="scrollbar-thumb-(--my-scrollbar-thumb) scrollbar-track-(--my-scrollbar-track) ...">  <!-- ... --></div>

Applying on hover

Prefix a scrollbar-color utility with a variant like hover:* to only apply the utility in that state:

<div class="scrollbar-thumb-sky-700 hover:scrollbar-thumb-sky-500 ...">  <!-- ... --></div>

Learn more about using variants in the variants documentation.

Responsive design

Prefix a scrollbar-color utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="scrollbar-thumb-slate-900 scrollbar-track-slate-200 md:scrollbar-thumb-sky-700 ...">  <!-- ... --></div>

Learn more about using variants in the variants documentation.

Customizing your theme

Use the --color-* theme variables to customize the color utilities in your project:

@theme {  --color-regal-blue: #243c5a; }

Now utilities like scrollbar-thumb-regal-blue and scrollbar-track-regal-blue can be used in your markup:

<div class="scrollbar-thumb-regal-blue">  <!-- ... --></div>

Learn more about customizing your theme in the theme documentation.