tessl/npm-tailwind-scrollbar
Tailwind plugin for styling scrollbars with cross-browser support
—
Pending
base-utilities.mddocs/
Base Scrollbar Utilities
Fundamental scrollbar control utilities that enable, modify, or hide scrollbars entirely.
Capabilities
Scrollbar Utility
Enables custom scrollbar styling with default 16px size.
/**
* Enables custom scrollbar with default sizing and color variable support
* - Sets scrollbar-width to auto (allows custom sizing)
* - Uses CSS custom properties for colors
* - Enables WebKit scrollbar pseudoelements
* - Default size: 16px width and height
*/
.scrollbar {
scrollbar-width: auto;
scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
&::-webkit-scrollbar {
display: block;
width: var(--scrollbar-width, 16px);
height: var(--scrollbar-height, 16px);
}
&::-webkit-scrollbar-track {
background-color: var(--scrollbar-track);
border-radius: var(--scrollbar-track-radius);
}
&::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb);
border-radius: var(--scrollbar-thumb-radius);
}
&::-webkit-scrollbar-corner {
background-color: var(--scrollbar-corner);
border-radius: var(--scrollbar-corner-radius);
}
}Usage Example:
<!-- Basic scrollbar -->
<div class="scrollbar overflow-auto h-64 w-64">
<div class="h-96 w-96">
Content that overflows both horizontally and vertically
</div>
</div>
<!-- Scrollbar with colors -->
<div class="scrollbar scrollbar-track-gray-100 scrollbar-thumb-blue-500 overflow-auto h-64">
<div class="h-96">Tall content</div>
</div>Scrollbar Thin Utility
Enables thin scrollbar styling with 8px size.
/**
* Enables thin scrollbar with fixed 8px sizing
* - Sets scrollbar-width to thin (browser default thin size)
* - Uses CSS custom properties for colors
* - Fixed 8px size for WebKit browsers
*/
.scrollbar-thin {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
&::-webkit-scrollbar {
display: block;
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-track {
background-color: var(--scrollbar-track);
border-radius: var(--scrollbar-track-radius);
}
&::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb);
border-radius: var(--scrollbar-thumb-radius);
}
&::-webkit-scrollbar-corner {
background-color: var(--scrollbar-corner);
border-radius: var(--scrollbar-corner-radius);
}
}Usage Example:
<!-- Thin scrollbar -->
<div class="scrollbar-thin overflow-auto h-64">
<div class="h-96">Content with thin scrollbar</div>
</div>
<!-- Thin scrollbar with colors -->
<div class="scrollbar-thin scrollbar-thumb-green-400 scrollbar-track-green-100 overflow-auto h-64">
<div class="h-96">Content with styled thin scrollbar</div>
</div>Scrollbar None Utility
Completely hides scrollbars while maintaining scroll functionality.
/**
* Hides scrollbar completely while preserving scroll functionality
* - Sets scrollbar-width to none (hides in Firefox/standards browsers)
* - Hides WebKit scrollbar with display: none
*/
.scrollbar-none {
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}Usage Example:
<!-- Hidden scrollbar but still scrollable -->
<div class="scrollbar-none overflow-auto h-64">
<div class="h-96">
Content is scrollable but scrollbar is invisible
</div>
</div>
<!-- Custom scroll indicators -->
<div class="scrollbar-none overflow-auto h-64 relative">
<div class="h-96">Content</div>
<!-- Custom scroll indicator can be added with JavaScript -->
</div>Browser Compatibility
Each utility handles browser differences automatically:
Standard Strategy (default)
.scrollbar {
/* Modern browsers (Firefox/Chromium) */
scrollbar-width: auto;
scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
/* WebKit browsers (Safari/older Chrome) */
&::-webkit-scrollbar { /* WebKit rules */ }
}Pseudoelements Strategy
.scrollbar {
/* Firefox-only modern properties */
@supports (-moz-appearance:none) {
scrollbar-width: auto;
scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
}
/* WebKit browsers (all other browsers) */
&::-webkit-scrollbar { /* WebKit rules */ }
}CSS Custom Properties
Base utilities use CSS custom properties for theming:
/* Color properties */
--scrollbar-track: /* Track background color */
--scrollbar-thumb: /* Thumb background color */
--scrollbar-corner: /* Corner background color */
/* Border radius properties */
--scrollbar-track-radius: /* Track border radius */
--scrollbar-thumb-radius: /* Thumb border radius */
--scrollbar-corner-radius: /* Corner border radius */
/* Size properties (scrollbar utility only) */
--scrollbar-width: /* Horizontal scrollbar width */
--scrollbar-height: /* Vertical scrollbar height */These properties are set by color, size, and rounded utilities and consumed by the base utilities.
Usage Patterns
Basic Scrollable Container
<div class="scrollbar overflow-auto max-h-screen">
<div class="space-y-4">
<!-- Long content -->
</div>
</div>Styled Chat Messages
<div class="scrollbar-thin scrollbar-track-gray-100 scrollbar-thumb-gray-300 overflow-y-auto h-96 p-4">
<div class="space-y-2">
<!-- Chat messages -->
</div>
</div>Code Editor Style
<pre class="scrollbar scrollbar-track-gray-800 scrollbar-thumb-gray-600 overflow-auto bg-gray-900 text-white p-4">
<code>
// Code content
</code>
</pre>Hidden Scrollbar with Custom Controls
<div class="relative">
<div class="scrollbar-none overflow-auto h-64" id="content">
<div class="h-96">Content</div>
</div>
<!-- Custom scroll buttons -->
<button class="absolute top-0 right-0" onclick="scrollUp()">↑</button>
<button class="absolute bottom-0 right-0" onclick="scrollDown()">↓</button>
</div>Install with Tessl CLI
npx tessl i tessl/npm-tailwind-scrollbar