Skip to content

Document scrollbar-* utilities #2480

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RobinMalfait wants to merge 1 commit into
base: 4.3.0
Choose a base branch
from
+296 −0
Open

Document scrollbar-* utilities #2480

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/app/(docs)/docs/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,8 @@ export default {
["pointer-events", "/docs/pointer-events"],
["resize", "/docs/resize"],
["scroll-behavior", "/docs/scroll-behavior"],
["scrollbar-color", "/docs/scrollbar-color"],
["scrollbar-width", "/docs/scrollbar-width"],
["scroll-margin", "/docs/scroll-margin"],
["scroll-padding", "/docs/scroll-padding"],
["scroll-snap-align", "/docs/scroll-snap-align"],
Expand Down
16 changes: 16 additions & 0 deletions src/docs/colors.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,22 @@ Here's a full list of utilities that use your color palette:
Sets the <a href="/docs/caret-color">caret color</a> in form controls
</td>
</tr>
<tr>
<td>
<code>scrollbar-thumb-*</code>
</td>
<td>
Sets the <a href="/docs/scrollbar-color">thumb color</a> of an element's scrollbar
</td>
</tr>
<tr>
<td>
<code>scrollbar-track-*</code>
</td>
<td>
Sets the <a href="/docs/scrollbar-color">track color</a> of an element's scrollbar
</td>
</tr>
<tr>
<td>
<code>fill-*</code>
Expand Down
193 changes: 193 additions & 0 deletions src/docs/scrollbar-color.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
import { ApiTable } from "@/components/api-table.tsx";
import { CustomizingYourThemeColors, ResponsiveDesign, TargetingSpecificStates } from "@/components/content.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import colors from "./utils/colors";

export const title = "scrollbar-color";
export const description = "Utilities for controlling the color of an element's scrollbar.";

<ApiTable
rows={[
[
"scrollbar-thumb-inherit",
"--tw-scrollbar-thumb: inherit;\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);",
],
[
"scrollbar-thumb-current",
"--tw-scrollbar-thumb: currentColor;\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);",
],
[
"scrollbar-thumb-transparent",
"--tw-scrollbar-thumb: transparent;\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);",
],
...Object.entries(colors).map(([name, value]) => [
`scrollbar-thumb-${name}`,
`--tw-scrollbar-thumb: var(--color-${name}); /* ${value} */\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);`,
]),
[
"scrollbar-thumb-(<custom-property>)",
"--tw-scrollbar-thumb: var(<custom-property>);\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);",
],
[
"scrollbar-thumb-[<value>]",
"--tw-scrollbar-thumb: <value>;\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);",
],
[
"scrollbar-track-inherit",
"--tw-scrollbar-track: inherit;\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);",
],
[
"scrollbar-track-current",
"--tw-scrollbar-track: currentColor;\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);",
],
[
"scrollbar-track-transparent",
"--tw-scrollbar-track: transparent;\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);",
],
...Object.entries(colors).map(([name, value]) => [
`scrollbar-track-${name}`,
`--tw-scrollbar-track: var(--color-${name}); /* ${value} */\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);`,
]),
[
"scrollbar-track-(<custom-property>)",
"--tw-scrollbar-track: var(<custom-property>);\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);",
],
[
"scrollbar-track-[<value>]",
"--tw-scrollbar-track: <value>;\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);",
],
]}
/>

## Examples

### Setting the scrollbar color

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

<Figure hint="Scroll vertically">

<Example>
{
<div className="mx-auto h-72 max-w-sm scrollbar-thumb-sky-700 scrollbar-track-sky-100 overflow-auto rounded-xl bg-white p-6 text-sm/6 text-gray-600 shadow-lg ring-1 ring-black/5 dark:scrollbar-thumb-sky-400 dark:scrollbar-track-gray-700 dark:bg-gray-800 dark:text-gray-300">
<div className="space-y-4">
<p>
The Cerulean Archives occupy three narrow floors above the old observatory, each lined with drawers of star
maps, expedition notes, and brass instruments cataloged by hand.
</p>
<p>
On winter mornings, the staff rolls ladders between the shelves while pale light cuts through the roof windows
and settles on the reading tables.
</p>
<p>
Visitors can request anything from the collection, but most come for the atlases that chart coastlines no
longer found on modern maps.
</p>
<p>
Every returned volume is inspected, dusted, and wrapped before being carried back into the stacks for the next
researcher.
</p>
</div>
</div>
}
</Example>

```html
<!-- [!code classes:scrollbar-thumb-sky-700,scrollbar-track-sky-100] -->
<div class="scrollbar-thumb-sky-700 scrollbar-track-sky-100 overflow-auto ...">
<!-- ... -->
</div>
```

</Figure>

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:

<Figure hint="Scroll vertically">

<Example>
{
<div className="mx-auto h-72 max-w-sm scrollbar-thumb-slate-900/60 scrollbar-track-slate-900/10 overflow-auto rounded-xl bg-white p-6 text-sm/6 text-gray-600 shadow-lg ring-1 ring-black/5 dark:scrollbar-thumb-white/40 dark:scrollbar-track-white/10 dark:bg-gray-800 dark:text-gray-300">
<div className="space-y-4">
<p>
The Cerulean Archives occupy three narrow floors above the old observatory, each lined with drawers of star
maps, expedition notes, and brass instruments cataloged by hand.
</p>
<p>
On winter mornings, the staff rolls ladders between the shelves while pale light cuts through the roof windows
and settles on the reading tables.
</p>
<p>
Visitors can request anything from the collection, but most come for the atlases that chart coastlines no
longer found on modern maps.
</p>
<p>
Every returned volume is inspected, dusted, and wrapped before being carried back into the stacks for the next
researcher.
</p>
</div>
</div>
}
</Example>

```html
<!-- [!code word:/60] -->
<!-- [!code word:/10] -->
<div class="scrollbar-thumb-slate-900/60 scrollbar-track-slate-900/10 ...">
<!-- ... -->
</div>
```

</Figure>

### Using a custom value

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

```html
<!-- [!code classes:scrollbar-thumb-[#0f766e],scrollbar-track-[#ccfbf1]] -->
<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:

```html
<!-- [!code classes:scrollbar-thumb-(--my-scrollbar-thumb),scrollbar-track-(--my-scrollbar-track)] -->
<div class="scrollbar-thumb-(--my-scrollbar-thumb) scrollbar-track-(--my-scrollbar-track) ...">
<!-- ... -->
</div>
```

### Applying on hover

<TargetingSpecificStates property="scrollbar-color">

```html
<!-- [!code classes:hover:scrollbar-thumb-sky-500] -->
<div class="scrollbar-thumb-sky-700 hover:scrollbar-thumb-sky-500 ...">
<!-- ... -->
</div>
```

</TargetingSpecificStates>

### Responsive design

<ResponsiveDesign
property="scrollbar-color"
defaultClass="scrollbar-thumb-slate-900 scrollbar-track-slate-200"
featuredClass="scrollbar-thumb-sky-700"
/>

## Customizing your theme

<CustomizingYourThemeColors utilities={["scrollbar-thumb", "scrollbar-track"]} />
85 changes: 85 additions & 0 deletions src/docs/scrollbar-width.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import { ApiTable } from "@/components/api-table.tsx";
import { ResponsiveDesign } from "@/components/content.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";

export const title = "scrollbar-width";
export const description = "Utilities for controlling the width of an element's scrollbar.";

<ApiTable
rows={[
["scrollbar-auto", "scrollbar-width: auto;"],
["scrollbar-thin", "scrollbar-width: thin;"],
["scrollbar-none", "scrollbar-width: none;"],
]}
/>

## Examples

### Using the default scrollbar width

Use the `scrollbar-auto` utility to use the browser's default scrollbar width:

```html
<!-- [!code classes:scrollbar-auto] -->
<div class="scrollbar-auto overflow-auto ...">
<!-- ... -->
</div>
```

### Using a thin scrollbar

Use the `scrollbar-thin` utility to use a thinner scrollbar:

<Figure hint="Scroll vertically">

<Example>
{
<div className="mx-auto h-72 max-w-sm scrollbar-thin overflow-auto rounded-xl bg-white p-6 text-sm/6 text-gray-600 shadow-lg ring-1 ring-black/5 dark:bg-gray-800 dark:text-gray-300">
<div className="space-y-4">
<p>
The Cerulean Archives occupy three narrow floors above the old observatory, each lined with drawers of star
maps, expedition notes, and brass instruments cataloged by hand.
</p>
<p>
On winter mornings, the staff rolls ladders between the shelves while pale light cuts through the roof windows
and settles on the reading tables.
</p>
<p>
Visitors can request anything from the collection, but most come for the atlases that chart coastlines no
longer found on modern maps.
</p>
<p>
Every returned volume is inspected, dusted, and wrapped before being carried back into the stacks for the next
researcher.
</p>
</div>
</div>
}
</Example>

```html
<!-- [!code classes:scrollbar-thin] -->
<div class="scrollbar-thin overflow-auto ...">
<!-- ... -->
</div>
```

</Figure>

### Hiding scrollbars

Use the `scrollbar-none` utility to hide scrollbars while still allowing an element to scroll:

```html
<!-- [!code classes:scrollbar-none] -->
<div class="scrollbar-none overflow-auto ...">
<!-- ... -->
</div>
```

These utilities only support the browser keywords `auto`, `thin`, and `none`.

### Responsive design

<ResponsiveDesign property="scrollbar-width" defaultClass="scrollbar-none" featuredClass="scrollbar-auto" />