scrollbar-color

示例

设置滚动条颜色

使用像 scrollbar-thumb-sky-700 和 scrollbar-track-sky-100 这样的工具类来控制滚动条的颜色：

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

你可以独立设置拇指和轨道的颜色。如果只设置其中一个而不设置另一个，未设置的颜色默认为透明。

更改不透明度

使用颜色不透明度修饰符来控制元素滚动条颜色的不透明度：

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

使用自定义值

使用像 scrollbar-thumb-[<value>] 和 scrollbar-track-[<value>] 这样的工具类，基于完全自定义的值来设置滚动条颜色：

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

对于 CSS 变量，你也可以使用 scrollbar-thumb-(<custom-property>) 和 scrollbar-track-(<custom-property>) 语法：

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

在悬停时应用

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.

响应式设计

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.

自定义你的主题

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.