Skip to content

Commit 36c64db

Browse files
RobinMalfaitRobinMalfait
authored
Document scrollbar-* utilities (#2480)
This PR adds documentation for the new `scrollbar-*` utilities introduced in tailwindlabs/tailwindcss#19981 Direct links: - https://tailwindcss-com-git-feat-document-scrollbar-081599-tailwindlabs.vercel.app/docs/scrollbar-color - https://tailwindcss-com-git-feat-document-scrollbar-081599-tailwindlabs.vercel.app/docs/scrollbar-width
1 parent 68d9905 commit 36c64db

4 files changed

Lines changed: 296 additions & 0 deletions

File tree

‎src/app/(docs)/docs/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,8 @@ export default {
219219
["pointer-events", "/docs/pointer-events"],
220220
["resize", "/docs/resize"],
221221
["scroll-behavior", "/docs/scroll-behavior"],
222+
["scrollbar-color", "/docs/scrollbar-color"],
223+
["scrollbar-width", "/docs/scrollbar-width"],
222224
["scroll-margin", "/docs/scroll-margin"],
223225
["scroll-padding", "/docs/scroll-padding"],
224226
["scroll-snap-align", "/docs/scroll-snap-align"],

‎src/docs/colors.mdx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,22 @@ Here's a full list of utilities that use your color palette:
248248
Sets the <a href="/docs/caret-color">caret color</a> in form controls
249249
</td>
250250
</tr>
251+
<tr>
252+
<td>
253+
<code>scrollbar-thumb-*</code>
254+
</td>
255+
<td>
256+
Sets the <a href="/docs/scrollbar-color">thumb color</a> of an element's scrollbar
257+
</td>
258+
</tr>
259+
<tr>
260+
<td>
261+
<code>scrollbar-track-*</code>
262+
</td>
263+
<td>
264+
Sets the <a href="/docs/scrollbar-color">track color</a> of an element's scrollbar
265+
</td>
266+
</tr>
251267
<tr>
252268
<td>
253269
<code>fill-*</code>

‎src/docs/scrollbar-color.mdx‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
import { ApiTable } from "@/components/api-table.tsx";
2+
import { CustomizingYourThemeColors, ResponsiveDesign, TargetingSpecificStates } from "@/components/content.tsx";
3+
import { Example } from "@/components/example.tsx";
4+
import { Figure } from "@/components/figure.tsx";
5+
import colors from "./utils/colors";
6+
7+
export const title = "scrollbar-color";
8+
export const description = "Utilities for controlling the color of an element's scrollbar.";
9+
10+
<ApiTable
11+
rows={[
12+
[
13+
"scrollbar-thumb-inherit",
14+
"--tw-scrollbar-thumb: inherit;\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);",
15+
],
16+
[
17+
"scrollbar-thumb-current",
18+
"--tw-scrollbar-thumb: currentColor;\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);",
19+
],
20+
[
21+
"scrollbar-thumb-transparent",
22+
"--tw-scrollbar-thumb: transparent;\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);",
23+
],
24+
...Object.entries(colors).map(([name, value]) => [
25+
`scrollbar-thumb-${name}`,
26+
`--tw-scrollbar-thumb: var(--color-${name}); /* ${value} */\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);`,
27+
]),
28+
[
29+
"scrollbar-thumb-(<custom-property>)",
30+
"--tw-scrollbar-thumb: var(<custom-property>);\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);",
31+
],
32+
[
33+
"scrollbar-thumb-[<value>]",
34+
"--tw-scrollbar-thumb: <value>;\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);",
35+
],
36+
[
37+
"scrollbar-track-inherit",
38+
"--tw-scrollbar-track: inherit;\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);",
39+
],
40+
[
41+
"scrollbar-track-current",
42+
"--tw-scrollbar-track: currentColor;\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);",
43+
],
44+
[
45+
"scrollbar-track-transparent",
46+
"--tw-scrollbar-track: transparent;\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);",
47+
],
48+
...Object.entries(colors).map(([name, value]) => [
49+
`scrollbar-track-${name}`,
50+
`--tw-scrollbar-track: var(--color-${name}); /* ${value} */\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);`,
51+
]),
52+
[
53+
"scrollbar-track-(<custom-property>)",
54+
"--tw-scrollbar-track: var(<custom-property>);\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);",
55+
],
56+
[
57+
"scrollbar-track-[<value>]",
58+
"--tw-scrollbar-track: <value>;\nscrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);",
59+
],
60+
]}
61+
/>
62+
63+
## Examples
64+
65+
### Setting the scrollbar color
66+
67+
Use utilities like `scrollbar-thumb-sky-700` and `scrollbar-track-sky-100` to control the colors of a scrollbar:
68+
69+
<Figure hint="Scroll vertically">
70+
71+
<Example>
72+
{
73+
<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">
74+
<div className="space-y-4">
75+
<p>
76+
The Cerulean Archives occupy three narrow floors above the old observatory, each lined with drawers of star
77+
maps, expedition notes, and brass instruments cataloged by hand.
78+
</p>
79+
<p>
80+
On winter mornings, the staff rolls ladders between the shelves while pale light cuts through the roof windows
81+
and settles on the reading tables.
82+
</p>
83+
<p>
84+
Visitors can request anything from the collection, but most come for the atlases that chart coastlines no
85+
longer found on modern maps.
86+
</p>
87+
<p>
88+
Every returned volume is inspected, dusted, and wrapped before being carried back into the stacks for the next
89+
researcher.
90+
</p>
91+
</div>
92+
</div>
93+
}
94+
</Example>
95+
96+
```html
97+
<!-- [!code classes:scrollbar-thumb-sky-700,scrollbar-track-sky-100] -->
98+
<div class="scrollbar-thumb-sky-700 scrollbar-track-sky-100 overflow-auto ...">
99+
<!-- ... -->
100+
</div>
101+
```
102+
103+
</Figure>
104+
105+
You can set the thumb and track colors independently. If you set one without the other, the unset color defaults to transparent.
106+
107+
### Changing the opacity
108+
109+
Use the color opacity modifier to control the opacity of an element's scrollbar colors:
110+
111+
<Figure hint="Scroll vertically">
112+
113+
<Example>
114+
{
115+
<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">
116+
<div className="space-y-4">
117+
<p>
118+
The Cerulean Archives occupy three narrow floors above the old observatory, each lined with drawers of star
119+
maps, expedition notes, and brass instruments cataloged by hand.
120+
</p>
121+
<p>
122+
On winter mornings, the staff rolls ladders between the shelves while pale light cuts through the roof windows
123+
and settles on the reading tables.
124+
</p>
125+
<p>
126+
Visitors can request anything from the collection, but most come for the atlases that chart coastlines no
127+
longer found on modern maps.
128+
</p>
129+
<p>
130+
Every returned volume is inspected, dusted, and wrapped before being carried back into the stacks for the next
131+
researcher.
132+
</p>
133+
</div>
134+
</div>
135+
}
136+
</Example>
137+
138+
```html
139+
<!-- [!code word:/60] -->
140+
<!-- [!code word:/10] -->
141+
<div class="scrollbar-thumb-slate-900/60 scrollbar-track-slate-900/10 ...">
142+
<!-- ... -->
143+
</div>
144+
```
145+
146+
</Figure>
147+
148+
### Using a custom value
149+
150+
Use utilities like `scrollbar-thumb-[<value>]` and `scrollbar-track-[<value>]` to set scrollbar colors based on
151+
completely custom values:
152+
153+
```html
154+
<!-- [!code classes:scrollbar-thumb-[#0f766e],scrollbar-track-[#ccfbf1]] -->
155+
<div class="scrollbar-thumb-[#0f766e] scrollbar-track-[#ccfbf1] ...">
156+
<!-- ... -->
157+
</div>
158+
```
159+
160+
For CSS variables, you can also use the `scrollbar-thumb-(<custom-property>)` and
161+
`scrollbar-track-(<custom-property>)` syntax:
162+
163+
```html
164+
<!-- [!code classes:scrollbar-thumb-(--my-scrollbar-thumb),scrollbar-track-(--my-scrollbar-track)] -->
165+
<div class="scrollbar-thumb-(--my-scrollbar-thumb) scrollbar-track-(--my-scrollbar-track) ...">
166+
<!-- ... -->
167+
</div>
168+
```
169+
170+
### Applying on hover
171+
172+
<TargetingSpecificStates property="scrollbar-color">
173+
174+
```html
175+
<!-- [!code classes:hover:scrollbar-thumb-sky-500] -->
176+
<div class="scrollbar-thumb-sky-700 hover:scrollbar-thumb-sky-500 ...">
177+
<!-- ... -->
178+
</div>
179+
```
180+
181+
</TargetingSpecificStates>
182+
183+
### Responsive design
184+
185+
<ResponsiveDesign
186+
property="scrollbar-color"
187+
defaultClass="scrollbar-thumb-slate-900 scrollbar-track-slate-200"
188+
featuredClass="scrollbar-thumb-sky-700"
189+
/>
190+
191+
## Customizing your theme
192+
193+
<CustomizingYourThemeColors utilities={["scrollbar-thumb", "scrollbar-track"]} />

‎src/docs/scrollbar-width.mdx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import { ApiTable } from "@/components/api-table.tsx";
2+
import { ResponsiveDesign } from "@/components/content.tsx";
3+
import { Example } from "@/components/example.tsx";
4+
import { Figure } from "@/components/figure.tsx";
5+
6+
export const title = "scrollbar-width";
7+
export const description = "Utilities for controlling the width of an element's scrollbar.";
8+
9+
<ApiTable
10+
rows={[
11+
["scrollbar-auto", "scrollbar-width: auto;"],
12+
["scrollbar-thin", "scrollbar-width: thin;"],
13+
["scrollbar-none", "scrollbar-width: none;"],
14+
]}
15+
/>
16+
17+
## Examples
18+
19+
### Using the default scrollbar width
20+
21+
Use the `scrollbar-auto` utility to use the browser's default scrollbar width:
22+
23+
```html
24+
<!-- [!code classes:scrollbar-auto] -->
25+
<div class="scrollbar-auto overflow-auto ...">
26+
<!-- ... -->
27+
</div>
28+
```
29+
30+
### Using a thin scrollbar
31+
32+
Use the `scrollbar-thin` utility to use a thinner scrollbar:
33+
34+
<Figure hint="Scroll vertically">
35+
36+
<Example>
37+
{
38+
<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">
39+
<div className="space-y-4">
40+
<p>
41+
The Cerulean Archives occupy three narrow floors above the old observatory, each lined with drawers of star
42+
maps, expedition notes, and brass instruments cataloged by hand.
43+
</p>
44+
<p>
45+
On winter mornings, the staff rolls ladders between the shelves while pale light cuts through the roof windows
46+
and settles on the reading tables.
47+
</p>
48+
<p>
49+
Visitors can request anything from the collection, but most come for the atlases that chart coastlines no
50+
longer found on modern maps.
51+
</p>
52+
<p>
53+
Every returned volume is inspected, dusted, and wrapped before being carried back into the stacks for the next
54+
researcher.
55+
</p>
56+
</div>
57+
</div>
58+
}
59+
</Example>
60+
61+
```html
62+
<!-- [!code classes:scrollbar-thin] -->
63+
<div class="scrollbar-thin overflow-auto ...">
64+
<!-- ... -->
65+
</div>
66+
```
67+
68+
</Figure>
69+
70+
### Hiding scrollbars
71+
72+
Use the `scrollbar-none` utility to hide scrollbars while still allowing an element to scroll:
73+
74+
```html
75+
<!-- [!code classes:scrollbar-none] -->
76+
<div class="scrollbar-none overflow-auto ...">
77+
<!-- ... -->
78+
</div>
79+
```
80+
81+
These utilities only support the browser keywords `auto`, `thin`, and `none`.
82+
83+
### Responsive design
84+
85+
<ResponsiveDesign property="scrollbar-width" defaultClass="scrollbar-none" featuredClass="scrollbar-auto" />

0 commit comments

Comments
 (0)