tessl/npm-tailwind-scrollbar
Tailwind plugin for styling scrollbars with cross-browser support
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
Tailwind Scrollbar
Tailwind Scrollbar is a Tailwind CSS plugin that provides comprehensive scrollbar styling utilities with cross-browser support. It addresses the fragmented scrollbar styling landscape by providing a unified API that handles both the Firefox/Chromium standard (scrollbar-width, scrollbar-color) and the WebKit pseudoelement approach (::-webkit-scrollbar) used by other browsers.
Package Information
- Package Name: tailwind-scrollbar
- Package Type: npm
- Language: JavaScript
- Installation:
npm install --save-dev tailwind-scrollbar
Core Imports
// Import as CSS using Tailwind v4 syntax
@import 'tailwindcss';
@plugin 'tailwind-scrollbar';Or using JavaScript configuration:
const scrollbarPlugin = require('tailwind-scrollbar');
module.exports = {
plugins: [
scrollbarPlugin(options)
]
};Basic Usage
<!-- Enable custom scrollbar with default styling -->
<div class="scrollbar overflow-auto h-64">
<div class="h-96">Content that overflows...</div>
</div>
<!-- Style scrollbar colors -->
<div class="scrollbar scrollbar-track-gray-100 scrollbar-thumb-gray-400 overflow-auto h-64">
<div class="h-96">Content with custom colors...</div>
</div>
<!-- Use thin scrollbar -->
<div class="scrollbar-thin scrollbar-thumb-blue-500 overflow-auto h-64">
<div class="h-96">Content with thin scrollbar...</div>
</div>
<!-- Hide scrollbar completely -->
<div class="scrollbar-none overflow-auto h-64">
<div class="h-96">Content with hidden scrollbar...</div>
</div>Architecture
Tailwind Scrollbar is built around several key components:
- Plugin Factory: Main export that creates a Tailwind CSS plugin with configurable options
- Utility Generation: Functions that generate CSS utilities for different scrollbar aspects
- Browser Strategy Handling: Conditional CSS generation based on browser compatibility preferences
- Component System: Unified API for styling track, thumb, and corner scrollbar components
Capabilities
Plugin Configuration
Core plugin setup and configuration options for controlling scrollbar styling behavior and browser compatibility strategies.
/**
* Creates a Tailwind CSS plugin for scrollbar styling utilities
* @param options - Configuration options for the plugin
* @returns Tailwind CSS plugin instance
*/
function plugin(options?: PluginOptions): TailwindPlugin;
const plugin = require('tailwind-scrollbar');Base Scrollbar Utilities
Fundamental scrollbar control utilities that enable, modify, or hide scrollbars entirely.
.scrollbar { /* Enable custom scrollbar with 16px default size */ }
.scrollbar-thin { /* Enable thin scrollbar with 8px size */ }
.scrollbar-none { /* Hide scrollbar completely */ }Color Utilities
Comprehensive color styling for all scrollbar components using Tailwind's color system.
.scrollbar-track-{color} { /* Set track background color */ }
.scrollbar-thumb-{color} { /* Set thumb background color */ }
.scrollbar-corner-{color} { /* Set corner background color */ }Interactive States
Hover and active state variants for scrollbar components using WebKit pseudoelements.
.scrollbar-hover:scrollbar-thumb-{color} { /* Thumb hover state */ }
.scrollbar-track-hover:scrollbar-track-{color} { /* Track hover state */ }
.scrollbar-corner-hover:scrollbar-corner-{color} { /* Corner hover state */ }
.scrollbar-active:scrollbar-thumb-{color} { /* Thumb active state */ }
.scrollbar-track-active:scrollbar-track-{color} { /* Track active state */ }Advanced Utilities
Size and border radius utilities available in nocompatible mode for fine-grained control.
.scrollbar-w-{size} { /* Set scrollbar width */ }
.scrollbar-h-{size} { /* Set scrollbar height */ }
.scrollbar-{component}-rounded-{value} { /* Set component border radius */ }Helper Functions
Utility functions that may be useful when extending or working with the plugin.
/**
* Gets the underlying default import of a module.
* Handles differences between ESM and CommonJS imports for Tailwind internal modules.
*/
function importDefault<T>(mod: T | { __esModule: unknown, default: T }): T;Types
/**
* Plugin options for configuring scrollbar behavior
*/
interface PluginOptions {
/** Browser compatibility strategy - 'standard' uses modern properties, 'pseudoelements' prioritizes WebKit approach */
preferredStrategy?: 'standard' | 'pseudoelements';
/** Alternative lowercase spelling of preferredStrategy for compatibility */
preferredstrategy?: 'standard' | 'pseudoelements';
/** Enable additional size and rounded utilities (may cause compatibility issues) */
nocompatible?: boolean;
}
/**
* Tailwind plugin interface used internally
*/
interface TailwindPlugin {
/** Add base styles to Tailwind */
addBase: (styles: Record<string, any>) => void;
/** Add utilities to Tailwind */
addUtilities: (utilities: Record<string, any>) => void;
/** Add dynamic utilities based on theme values */
matchUtilities: (utilities: Record<string, Function>, options: { values: Record<string, any>, type?: string }) => void;
/** Access Tailwind theme configuration */
theme: (key: string) => any;
/** Add variant modifiers */
addVariant: (name: string, selector: string) => void;
/** Access Tailwind configuration */
config: (key: string) => any;
}- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Describes
- Publish Source
- CLI
- Badge
