or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-utilities.mdbase-utilities.mdcolor-utilities.mdhelpers.mdindex.mdinteractive-states.mdplugin-configuration.md
tile.json

tessl/npm-tailwind-scrollbar

Tailwind plugin for styling scrollbars with cross-browser support

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/tailwind-scrollbar@4.0.x

To install, run

npx @tessl/cli install tessl/npm-tailwind-scrollbar@4.0.0

index.mddocs/

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');

Plugin Configuration

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 */ }

Base Utilities

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 */ }

Color Utilities

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 */ }

Interactive States

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 */ }

Advanced Utilities

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;

Helper Functions

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;
}