CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tailwind-scrollbar

Tailwind plugin for styling scrollbars with cross-browser support

—

Pending
Overview
Eval results
Files

color-utilities.mddocs/

Color Utilities

Comprehensive color styling for all scrollbar components using Tailwind's color system.

Capabilities

Track Color Utilities

Sets the background color of the scrollbar track (the groove in which the thumb slides).

/**
 * Sets scrollbar track background color using Tailwind color values
 * Available for all colors in Tailwind theme plus arbitrary values
 */
.scrollbar-track-{color} {
  --scrollbar-track: {color-value};
}

/* Examples */
.scrollbar-track-gray-100 { --scrollbar-track: #f3f4f6; }
.scrollbar-track-blue-500 { --scrollbar-track: #3b82f6; }
.scrollbar-track-red-200 { --scrollbar-track: #fecaca; }
.scrollbar-track-[#ff0000] { --scrollbar-track: #ff0000; }

Usage Examples:

<!-- Light gray track -->
<div class="scrollbar scrollbar-track-gray-100 overflow-auto h-64">
  <div class="h-96">Content</div>
</div>

<!-- Blue track -->
<div class="scrollbar scrollbar-track-blue-200 overflow-auto h-64">
  <div class="h-96">Content</div>
</div>

<!-- Arbitrary color track -->
<div class="scrollbar scrollbar-track-[#f0f9ff] overflow-auto h-64">
  <div class="h-96">Content</div>
</div>

<!-- With opacity modifier -->
<div class="scrollbar scrollbar-track-gray-500/20 overflow-auto h-64">
  <div class="h-96">Content</div>
</div>

Thumb Color Utilities

Sets the background color of the scrollbar thumb (the draggable handle).

/**
 * Sets scrollbar thumb background color using Tailwind color values
 * Available for all colors in Tailwind theme plus arbitrary values
 */
.scrollbar-thumb-{color} {
  --scrollbar-thumb: {color-value};
}

/* Examples */
.scrollbar-thumb-gray-400 { --scrollbar-thumb: #9ca3af; }
.scrollbar-thumb-blue-600 { --scrollbar-thumb: #2563eb; }
.scrollbar-thumb-green-500 { --scrollbar-thumb: #10b981; }
.scrollbar-thumb-[#333333] { --scrollbar-thumb: #333333; }

Usage Examples:

<!-- Gray thumb -->
<div class="scrollbar scrollbar-thumb-gray-400 overflow-auto h-64">
  <div class="h-96">Content</div>
</div>

<!-- Blue thumb -->
<div class="scrollbar scrollbar-thumb-blue-600 overflow-auto h-64">
  <div class="h-96">Content</div>
</div>

<!-- Arbitrary color thumb -->
<div class="scrollbar scrollbar-thumb-[#8b5cf6] overflow-auto h-64">
  <div class="h-96">Content</div>
</div>

<!-- With opacity modifier -->
<div class="scrollbar scrollbar-thumb-black/30 overflow-auto h-64">
  <div class="h-96">Content</div>
</div>

Corner Color Utilities

Sets the background color of the scrollbar corner (where horizontal and vertical scrollbars meet).

/**
 * Sets scrollbar corner background color using Tailwind color values
 * Available for all colors in Tailwind theme plus arbitrary values
 */
.scrollbar-corner-{color} {
  --scrollbar-corner: {color-value};
}

/* Examples */
.scrollbar-corner-gray-200 { --scrollbar-corner: #e5e7eb; }
.scrollbar-corner-white { --scrollbar-corner: #ffffff; }
.scrollbar-corner-transparent { --scrollbar-corner: transparent; }
.scrollbar-corner-[#f8fafc] { --scrollbar-corner: #f8fafc; }

Usage Examples:

<!-- White corner (matches background) -->
<div class="scrollbar scrollbar-corner-white overflow-auto h-64 w-64">
  <div class="h-96 w-96">Content that overflows both ways</div>
</div>

<!-- Gray corner -->
<div class="scrollbar scrollbar-corner-gray-300 overflow-auto h-64 w-64">
  <div class="h-96 w-96">Content</div>
</div>

<!-- Transparent corner -->
<div class="scrollbar scrollbar-corner-transparent overflow-auto h-64 w-64">
  <div class="h-96 w-96">Content</div>
</div>

Color System Integration

All color utilities integrate with Tailwind's complete color system:

Standard Tailwind Colors

<!-- All standard colors available -->
<div class="scrollbar-thumb-red-500">Red thumb</div>
<div class="scrollbar-thumb-orange-400">Orange thumb</div>
<div class="scrollbar-thumb-yellow-300">Yellow thumb</div>
<div class="scrollbar-thumb-green-600">Green thumb</div>
<div class="scrollbar-thumb-blue-500">Blue thumb</div>
<div class="scrollbar-thumb-indigo-400">Indigo thumb</div>
<div class="scrollbar-thumb-purple-600">Purple thumb</div>
<div class="scrollbar-thumb-pink-500">Pink thumb</div>

Arbitrary Color Values

<!-- Custom hex colors -->
<div class="scrollbar-track-[#ff6b6b]">Custom hex track</div>
<div class="scrollbar-thumb-[rgb(34,197,94)]">RGB thumb</div>
<div class="scrollbar-corner-[hsl(220,91%,96%)]">HSL corner</div>

Opacity Modifiers

<!-- Color with opacity -->
<div class="scrollbar-track-blue-500/10">10% opacity blue track</div>
<div class="scrollbar-thumb-gray-900/50">50% opacity dark thumb</div>
<div class="scrollbar-corner-red-200/25">25% opacity red corner</div>

CSS Color Functions

<!-- Using modern CSS color functions -->
<div class="scrollbar-thumb-[color-mix(in_srgb,blue_50%,red)]">Color mix thumb</div>

Complete Color Coordination

Combine all color utilities for fully coordinated scrollbar styling:

<!-- Coordinated blue theme -->
<div class="scrollbar 
            scrollbar-track-blue-100 
            scrollbar-thumb-blue-500 
            scrollbar-corner-blue-50 
            overflow-auto h-64">
  <div class="h-96">Content with blue scrollbar theme</div>
</div>

<!-- Dark theme -->
<div class="scrollbar 
            scrollbar-track-gray-800 
            scrollbar-thumb-gray-600 
            scrollbar-corner-gray-900 
            overflow-auto h-64 bg-gray-900">
  <div class="h-96 text-white">Dark themed content</div>
</div>

<!-- High contrast -->
<div class="scrollbar 
            scrollbar-track-white 
            scrollbar-thumb-black 
            scrollbar-corner-gray-500 
            overflow-auto h-64 border">
  <div class="h-96">High contrast scrollbar</div>
</div>

Responsive Color Utilities

Color utilities work with Tailwind's responsive system:

<!-- Responsive scrollbar colors -->
<div class="scrollbar 
            scrollbar-thumb-blue-400 
            md:scrollbar-thumb-green-400 
            lg:scrollbar-thumb-purple-400 
            overflow-auto h-64">
  <div class="h-96">Responsive scrollbar colors</div>
</div>

Dark Mode Support

Color utilities integrate with Tailwind's dark mode:

<!-- Dark mode scrollbar colors -->
<div class="scrollbar 
            scrollbar-track-gray-100 
            scrollbar-thumb-gray-400 
            dark:scrollbar-track-gray-800 
            dark:scrollbar-thumb-gray-600 
            overflow-auto h-64">
  <div class="h-96">Content with dark mode scrollbar</div>
</div>

Color Function Support

The plugin supports both static color values and color functions from Tailwind themes:

// In tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: ({ opacityValue }) => {
        if (opacityValue !== undefined) {
          return `rgba(59, 130, 246, ${opacityValue})`;
        }
        return 'rgb(59, 130, 246)';
      }
    }
  }
};
<!-- Using color functions -->
<div class="scrollbar-thumb-primary">Dynamic color thumb</div>

Browser-Specific Behavior

Color utilities handle browser differences automatically:

Standards-Based Browsers (Firefox, modern Chrome)

  • Uses scrollbar-color property with thumb and track colors
  • Limited to basic color styling

WebKit Browsers (Safari, older Chrome)

  • Uses ::-webkit-scrollbar-* pseudoelements
  • Supports all three components (track, thumb, corner)
  • Full color customization including opacity

The plugin ensures consistent color appearance across all supported browsers while leveraging each browser's capabilities.

Install with Tessl CLI

npx tessl i tessl/npm-tailwind-scrollbar

docs

advanced-utilities.md

base-utilities.md

color-utilities.md

helpers.md

index.md

interactive-states.md

plugin-configuration.md

tile.json