CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tailwind-scrollbar

Tailwind plugin for styling scrollbars with cross-browser support

—

Pending
Overview
Eval results
Files

interactive-states.mddocs/

Interactive States

Hover and active state variants for scrollbar components using WebKit pseudoelements.

Capabilities

Scrollbar Hover States

Interactive states for when users hover over scrollbar components.

/**
 * Scrollbar thumb hover state - applies color when thumb is hovered
 */
.scrollbar-hover:scrollbar-thumb-{color} {
  &::-webkit-scrollbar-thumb:hover {
    --scrollbar-thumb: {color-value};
  }
}

/**
 * Scrollbar track hover state - applies color when track is hovered
 */
.scrollbar-track-hover:scrollbar-track-{color} {
  &::-webkit-scrollbar-track:hover {
    --scrollbar-track: {color-value};
  }
}

/**
 * Scrollbar corner hover state - applies color when corner is hovered
 */
.scrollbar-corner-hover:scrollbar-corner-{color} {
  &::-webkit-scrollbar-corner:hover {
    --scrollbar-corner: {color-value};
  }
}

Usage Examples:

<!-- Thumb changes color on hover -->
<div class="scrollbar 
            scrollbar-thumb-gray-400 
            scrollbar-hover:scrollbar-thumb-gray-600 
            overflow-auto h-64">
  <div class="h-96">Hover over the scrollbar thumb</div>
</div>

<!-- Track changes color on hover -->
<div class="scrollbar 
            scrollbar-track-gray-100 
            scrollbar-track-hover:scrollbar-track-gray-200 
            overflow-auto h-64">
  <div class="h-96">Hover over the scrollbar track</div>
</div>

<!-- Corner changes color on hover -->
<div class="scrollbar 
            scrollbar-corner-gray-100 
            scrollbar-corner-hover:scrollbar-corner-gray-300 
            overflow-auto h-64 w-64">
  <div class="h-96 w-96">Hover over the scrollbar corner</div>
</div>

Scrollbar Active States

Interactive states for when users click/press scrollbar components.

/**
 * Scrollbar thumb active state - applies color when thumb is being clicked/dragged
 */
.scrollbar-active:scrollbar-thumb-{color} {
  &::-webkit-scrollbar-thumb:active {
    --scrollbar-thumb: {color-value};
  }
}

/**
 * Scrollbar track active state - applies color when track is being clicked
 */
.scrollbar-track-active:scrollbar-track-{color} {
  &::-webkit-scrollbar-track:active {
    --scrollbar-track: {color-value};
  }
}

/* Note: Corners cannot be active, so no corner active variant exists */

Usage Examples:

<!-- Thumb changes color when clicked/dragged -->
<div class="scrollbar 
            scrollbar-thumb-blue-500 
            scrollbar-active:scrollbar-thumb-blue-700 
            overflow-auto h-64">
  <div class="h-96">Click and drag the scrollbar thumb</div>
</div>

<!-- Track changes color when clicked -->
<div class="scrollbar 
            scrollbar-track-gray-200 
            scrollbar-track-active:scrollbar-track-gray-400 
            overflow-auto h-64">
  <div class="h-96">Click on the scrollbar track</div>
</div>

Complete Interactive Examples

Combine multiple interactive states for comprehensive scrollbar feedback:

<!-- Full interactive thumb -->
<div class="scrollbar 
            scrollbar-thumb-blue-400 
            scrollbar-hover:scrollbar-thumb-blue-500 
            scrollbar-active:scrollbar-thumb-blue-700 
            overflow-auto h-64">
  <div class="h-96">Interactive blue thumb (hover and active states)</div>
</div>

<!-- Full interactive track -->
<div class="scrollbar 
            scrollbar-track-gray-100 
            scrollbar-track-hover:scrollbar-track-gray-200 
            scrollbar-track-active:scrollbar-track-gray-300 
            overflow-auto h-64">
  <div class="h-96">Interactive gray track (hover and active states)</div>
</div>

<!-- Complete interactive scrollbar -->
<div class="scrollbar 
            scrollbar-track-slate-100 
            scrollbar-thumb-slate-400 
            scrollbar-corner-slate-50
            scrollbar-track-hover:scrollbar-track-slate-200 
            scrollbar-hover:scrollbar-thumb-slate-500 
            scrollbar-corner-hover:scrollbar-corner-slate-100
            scrollbar-track-active:scrollbar-track-slate-300 
            scrollbar-active:scrollbar-thumb-slate-600 
            overflow-auto h-64 w-64">
  <div class="h-96 w-96">Fully interactive scrollbar with all states</div>
</div>

Browser Compatibility

Interactive states are implemented using WebKit pseudoelements and work in:

  • Safari (all versions)
  • Chrome/Chromium (all versions)
  • Edge (Chromium-based versions)
  • Opera (Chromium-based versions)

Firefox Compatibility: Firefox does not support interactive scrollbar states as it uses the standards-based scrollbar-color property which doesn't support hover/active states. The interactive utilities will be ignored in Firefox, but the base scrollbar colors will still work.

Accessibility Considerations

Interactive states improve scrollbar usability by providing visual feedback:

Hover States

  • Indicate that the scrollbar component is interactive
  • Help users distinguish between scrollable and non-scrollable areas
  • Provide immediate feedback when hovering over scrollbar elements

Active States

  • Confirm user interaction with scrollbar components
  • Provide feedback during drag operations
  • Help users understand they are successfully interacting with the scrollbar

Best Practices:

<!-- Good: Clear visual hierarchy -->
<div class="scrollbar 
            scrollbar-thumb-gray-300 
            scrollbar-hover:scrollbar-thumb-gray-400 
            scrollbar-active:scrollbar-thumb-gray-600">
  <!-- Subtle base color, medium hover, dark active -->
</div>

<!-- Good: Consistent color progression -->
<div class="scrollbar 
            scrollbar-thumb-blue-400 
            scrollbar-hover:scrollbar-thumb-blue-500 
            scrollbar-active:scrollbar-thumb-blue-600">
  <!-- Logical color progression: light → medium → dark -->
</div>

Advanced Interactive Patterns

Themed Interactive States

<!-- Green theme with interactive states -->
<div class="scrollbar 
            scrollbar-track-green-50 
            scrollbar-thumb-green-400 
            scrollbar-corner-green-25
            scrollbar-track-hover:scrollbar-track-green-100 
            scrollbar-hover:scrollbar-thumb-green-500 
            scrollbar-corner-hover:scrollbar-corner-green-50
            scrollbar-track-active:scrollbar-track-green-150 
            scrollbar-active:scrollbar-thumb-green-600">
  <div class="h-96">Green themed interactive scrollbar</div>
</div>

Dark Mode Interactive States

<!-- Dark mode with interactive states -->
<div class="scrollbar 
            scrollbar-track-gray-700 
            scrollbar-thumb-gray-500 
            scrollbar-corner-gray-800
            scrollbar-track-hover:scrollbar-track-gray-600 
            scrollbar-hover:scrollbar-thumb-gray-400 
            scrollbar-corner-hover:scrollbar-corner-gray-700
            scrollbar-track-active:scrollbar-track-gray-500 
            scrollbar-active:scrollbar-thumb-gray-300
            dark:scrollbar-track-gray-800 
            dark:scrollbar-thumb-gray-600 
            dark:scrollbar-corner-gray-900
            dark:scrollbar-track-hover:scrollbar-track-gray-700 
            dark:scrollbar-hover:scrollbar-thumb-gray-500 
            dark:scrollbar-corner-hover:scrollbar-corner-gray-800
            dark:scrollbar-track-active:scrollbar-track-gray-600 
            dark:scrollbar-active:scrollbar-thumb-gray-400">
  <div class="h-96">Dark mode interactive scrollbar</div>
</div>

High Contrast Interactive States

<!-- High contrast for accessibility -->
<div class="scrollbar 
            scrollbar-track-white 
            scrollbar-thumb-gray-800 
            scrollbar-corner-gray-100
            scrollbar-track-hover:scrollbar-track-gray-50 
            scrollbar-hover:scrollbar-thumb-black 
            scrollbar-corner-hover:scrollbar-corner-gray-200
            scrollbar-track-active:scrollbar-track-gray-100 
            scrollbar-active:scrollbar-thumb-gray-900">
  <div class="h-96">High contrast interactive scrollbar</div>
</div>

Responsive Interactive States

Interactive states work with Tailwind's responsive system:

<!-- Different interactive states on different screen sizes -->
<div class="scrollbar 
            scrollbar-thumb-blue-400 
            scrollbar-hover:scrollbar-thumb-blue-500 
            md:scrollbar-hover:scrollbar-thumb-green-500 
            lg:scrollbar-hover:scrollbar-thumb-purple-500 
            scrollbar-active:scrollbar-thumb-blue-700 
            md:scrollbar-active:scrollbar-thumb-green-700 
            lg:scrollbar-active:scrollbar-thumb-purple-700">
  <div class="h-96">Responsive interactive states</div>
</div>

Implementation Details

The plugin generates these variants using Tailwind's addVariant function:

// Internal plugin implementation
addVariant('scrollbar-hover', '&::-webkit-scrollbar-thumb:hover');
addVariant('scrollbar-track-hover', '&::-webkit-scrollbar-track:hover');
addVariant('scrollbar-corner-hover', '&::-webkit-scrollbar-corner:hover');
addVariant('scrollbar-active', '&::-webkit-scrollbar-thumb:active');
addVariant('scrollbar-track-active', '&::-webkit-scrollbar-track:active');

This ensures that interactive state utilities integrate seamlessly with Tailwind's variant system and can be combined with other utilities and modifiers.

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