scrollbar-color

示例(Examples)

设置滚动条颜色(Setting the scrollbar color)

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

🌐 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)

使用像 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>

悬停时应用(Applying on hover)

在 scrollbar-color 工具前面加上一个变体，例如 hover:*，以便仅在该状态下应用该工具：

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

请参阅 变体文档 详细了解如何使用变体。

响应式设计(Responsive design)

在 scrollbar-color 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。

自定义主题(Customizing your theme)

使用 --color-* 主题变量来自定义项目中的 color 工具：

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

现在的工具类如 scrollbar-thumb-regal-blue and scrollbar-track-regal-blue 可以在你的标记中使用：

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

在此详细了解如何自定义主题： 主题文档。