Interactivity

Scroll Bar

Utilities for sets scrollbar styling such as thumb size, track color, thumb color, thumb radius and thumb hover color.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class css

scrollbar {bar-size} {track-color} {thumb-color} {thumb-radius} {thumb-hover-color} ::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size) }

::-webkit-scrollbar-track { background-color: var(--scrollbar-track-color) }

::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-bgcolor); border-radius: var(--scrollbar-radius); border: var(--scrollbar-width) solid var(--scrollbar-thumb-color); background-clip: content-box }

::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-hover-bgcolor) }

class	css
scrollbar `{bar-size}` `{track-color}` `{thumb-color}` `{thumb-radius}` `{thumb-hover-color}`	::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size) } ::-webkit-scrollbar-track { background-color: var(--scrollbar-track-color) } ::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-bgcolor); border-radius: var(--scrollbar-radius); border: var(--scrollbar-width) solid var(--scrollbar-thumb-color); background-clip: content-box } ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-hover-bgcolor) }

class	css
bar-xs	--scrollbar-size: 4px
bar-sm	--scrollbar-size: 8px
bar-md	--scrollbar-size: 12px
bar-lg	--scrollbar-size: 16px
bar-xl	--scrollbar-size: 20px

class	css
thumb-rad-sm	--scrollbar-radius: 0.125rem
thumb-rad-md	--scrollbar-radius: 0.375rem
thumb-rad-lg	--scrollbar-radius: 0.5rem
thumb-rad-xl	--scrollbar-radius: 9999px

class
track-shade-`{palette}`-`{modifier}`	See:Palette page to find more about the color options (Shades, Tones, Tints), color manipulations (saturation, brightness, contrast), and transparency.
track-tone-`{palette}`-`{modifier}`
track-tint-`{palette}`-`{modifier}`

class
thumb-shade-`{palette}`-`{modifier}`	See:Palette page to find more about the color options (Shades, Tones, Tints), color manipulations (saturation, brightness, contrast), and transparency.
thumb-tone-`{palette}`-`{modifier}`
thumb-tint-`{palette}`-`{modifier}`

class
thumb-hover-shade-`{palette}`-`{modifier}`	See:Palette page to find more about the color options (Shades, Tones, Tints), color manipulations (saturation, brightness, contrast), and transparency.
thumb-hover-tone-`{palette}`-`{modifier}`
thumb-hover-tint-`{palette}`-`{modifier}`

Usage

<body class="scrollbar bar-sm track-tint-amber-2 thumb-rad-md thumb-tint-amber-5 thumb-hover-tint-amber-3">
  ...
</body>

HTML

body {
  @extend
    .scrollbar,
    .bar-sm,
    .track-tint-amber-2,
    .thumb-rad-md,
    .thumb-tint-amber-5,
    .thumb-hover-tint-amber-3;
}

SCSS