tessl/npm-tailwind-scrollbar

Tailwind plugin for styling scrollbars with cross-browser support

—

Pending

Overview

Eval results

Files

Helper Functions

Name: tessl/npm-tailwind-scrollbar
Author: tessl

Utility functions that may be useful when extending or working with the plugin.

Capabilities

importDefault Function

Gets the underlying default import of a module, handling differences between ESM and CommonJS imports for Tailwind internal modules.

/**
 * Gets the underlying default import of a module.
 * This is used to handle internal imports from Tailwind, since Tailwind Play
 * handles these imports differently than other environments.
 * @param mod - The module that may have __esModule wrapper
 * @returns The bare export
 */
function importDefault<T>(mod: T | { __esModule: unknown, default: T }): T;

Usage Examples:

const { importDefault } = require('tailwind-scrollbar/src/helpers');

// Example: Safely import a Tailwind internal module
const someModule = require('tailwindcss/lib/some-module');
const safeImport = importDefault(someModule);

// Use the imported module
const result = safeImport.someFunction();

Use Cases

This helper is primarily useful when:

Extending the plugin: If you're building additional functionality on top of tailwind-scrollbar
Working with Tailwind internals: When you need to access Tailwind's internal modules safely
Cross-environment compatibility: Ensuring your code works in both Node.js and browser environments like Tailwind Play

Implementation Details

The function checks if the module has an __esModule property and a default export, which indicates it's been processed by an ES6 module system. If so, it returns the default export; otherwise, it returns the module as-is.

This pattern is necessary because different environments handle ES6 modules differently:

Node.js with CommonJS: Modules are imported directly
Tailwind Play and other ES6 environments: Modules may be wrapped with __esModule metadata

Internal Usage:

The plugin itself uses this helper to safely import Tailwind's flattenColorPalette utility:

const flattenColorPaletteImport = require('tailwindcss/lib/util/flattenColorPalette');
const flattenColorPalette = importDefault(flattenColorPaletteImport);

Utility Functions

Internal functions used by the plugin that are also exported for advanced customization.

/**
 * Base resets to make the plugin's utilities work
 */
function addBaseStyles(tailwind: TailwindPlugin, preferredStrategy: 'standard' | 'pseudoelements'): void;

/**
 * Utilities for initializing custom styled scrollbars with size controls
 */
function addBaseSizeUtilities(tailwind: TailwindPlugin, preferredStrategy: 'standard' | 'pseudoelements'): void;

/**
 * Adds scrollbar-COMPONENT-COLOR utilities for every scrollbar component
 */
function addColorUtilities(tailwind: TailwindPlugin): void;

/**
 * Adds scrollbar-COMPONENT-rounded-VALUE utilities for every scrollbar component
 */
function addRoundedUtilities(tailwind: TailwindPlugin): void;

/**
 * Adds scrollbar-w-* and scrollbar-h-* utilities
 */
function addSizeUtilities(tailwind: TailwindPlugin): void;

/**
 * Adds scrollbar variants for styling webkit scrollbars' hover and active states
 */
function addVariants(tailwind: TailwindPlugin): void;

const {
  addBaseStyles,
  addBaseSizeUtilities,
  addColorUtilities,
  addRoundedUtilities,
  addSizeUtilities
} = require('tailwind-scrollbar/src/utilities');

const { addVariants } = require('tailwind-scrollbar/src/variants');

Usage Examples:

// Creating a custom plugin that extends tailwind-scrollbar
const plugin = require('tailwindcss/plugin');
const { addColorUtilities, addBaseStyles } = require('tailwind-scrollbar/src/utilities');

const customScrollbarPlugin = plugin(function(tailwind) {
  // Add base styles with standard strategy
  addBaseStyles(tailwind, 'standard');
  
  // Add color utilities
  addColorUtilities(tailwind);
  
  // Add your custom utilities here
  tailwind.addUtilities({
    '.scrollbar-glow': {
      '&::-webkit-scrollbar-thumb': {
        'box-shadow': '0 0 6px rgba(59, 130, 246, 0.5)'
      }
    }
  });
});

Install with Tessl CLI

npx tessl i tessl/npm-tailwind-scrollbar

docs

advanced-utilities.md

interactive-states.md

plugin-configuration.md

tile.json