### Start Local Development Server

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/website/README.md

Starts a local development server for live preview. Changes are reflected without restarting.

```bash
yarn start
```

--------------------------------

### Install Dependencies

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/website/README.md

Installs project dependencies using Yarn.

```bash
yarn
```

--------------------------------

### Example Usage of matchUtilities

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/types.md

A concrete example demonstrating the use of matchUtilities to define a '--scrollbar-track' CSS variable based on theme colors.

```javascript
matchUtilities({
  'scrollbar-track': value => ({
    '--scrollbar-track': value
  })
}, {
  values: colors,
  type: 'color'
});
```

--------------------------------

### HTML Usage Examples for Tailwind Scrollbar Styling

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/api-reference/utilities.md

Demonstrates how to apply scrollbar color utilities in HTML. Includes examples for basic colors, opacity, arbitrary colors, and styling all three components.

```html
<!-- Basic color styling -->
<div class="scrollbar scrollbar-track-gray-200 scrollbar-thumb-blue-500">
  Content
</div>

<!-- With opacity -->
<div class="scrollbar scrollbar-track-gray-100 scrollbar-thumb-blue-500/75">
  Content
</div>

<!-- Arbitrary colors -->
<div class="scrollbar scrollbar-track-[#e5e7eb] scrollbar-thumb-[#3b82f6]">
  Content
</div>

<!-- All three components -->
<div class="scrollbar scrollbar-track-white scrollbar-thumb-gray-400 scrollbar-corner-gray-300">
  Content
</div>
```

--------------------------------

### importDefault Behavior Examples

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/api-reference/helpers.md

Demonstrates how `importDefault` handles both CommonJS and ES6 module-wrapped imports.

```javascript
// For direct CommonJS imports
const module = require('some-module');
const result = importDefault(module);
// result === module (returned as-is)

// For ES6 module-wrapped imports (as in Tailwind Play)
const wrappedModule = {
  __esModule: true,
  default: require('some-module')
};
const result = importDefault(wrappedModule);
// result === wrappedModule.default
```

--------------------------------

### Setup tailwind-scrollbar with nocompatible mode

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/quick-reference.md

Configure tailwind.config.js to enable nocompatible mode for advanced features. This is the primary setup step for using the plugin.

```javascript
// tailwind.config.js
module.exports = {
  plugins: [require('tailwind-scrollbar')({ nocompatible: true })]
};
```

--------------------------------

### Complete Scrollbar Usage Example

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/api-reference/variants.md

This example demonstrates how to apply various scrollbar styling utilities to a div, including distinct states for the track, thumb, and corner. It showcases the custom variant prefixes like `scrollbar-track-hover:` and `scrollbar-active:`.

```html
<div class="
  scrollbar 
  scrollbar-track-gray-100 
  scrollbar-track-hover:scrollbar-track-gray-200
  scrollbar-track-active:scrollbar-track-gray-300
  scrollbar-thumb-blue-400 
  scrollbar-hover:scrollbar-thumb-blue-500
  scrollbar-active:scrollbar-thumb-blue-600
  scrollbar-corner-gray-100
  scrollbar-corner-hover:scrollbar-corner-gray-200
">
  Fully interactive scrollbar with distinct states for track, thumb, and corner
</div>
```

--------------------------------

### Validation Example

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/types.md

Demonstrates how invalid values for preferredStrategy trigger a console warning and default to 'standard'.

```javascript
// This logs a warning and uses 'standard'
plugin({ preferredStrategy: 'invalid' });
```

--------------------------------

### Basic Tailwind CSS Setup

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/README.md

Configure your tailwind.config.js file to include the tailwind-scrollbar plugin.

```javascript
// tailwind.config.js
module.exports = {
  plugins: [require('tailwind-scrollbar')()]
};
```

--------------------------------

### Basic Plugin Usage

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/api-reference/plugin.md

Example of how to include the tailwind-scrollbar plugin in your tailwind.config.js file using default options.

```javascript
// tailwind.config.js
const plugin = require('tailwind-scrollbar');

module.exports = {
  plugins: [
    plugin()  // Use default options
  ]
};
```

--------------------------------

### Install tailwind-scrollbar with pnpm

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/README.md

Add the tailwind-scrollbar package to your project's development dependencies using pnpm.

```bash
pnpm add -D tailwind-scrollbar
```

--------------------------------

### Scrollbar Variants Example

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/website/docs/examples.md

Applies different thumb colors when the scrollbar is hovered or active. This example uses the `scrollbar-hover:` and `scrollbar-active:` variants.

```html
<div class="scrollbar-hover:scrollbar-thumb-sky-500 scrollbar-active:scrollbar-thumb-sky-400 h-32 scrollbar scrollbar-thumb-slate-700 scrollbar-track-slate-300 overflow-y-scroll">
    <div class="h-64 bg-slate-400"></div>
</div>
```

--------------------------------

### Plugin Usage with nocompatible Option

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/api-reference/plugin.md

Example of enabling additional scrollbar size and border-radius utilities by setting the 'nocompatible' option to true.

```javascript
// tailwind.config.js
const plugin = require('tailwind-scrollbar');

module.exports = {
  plugins: [
    plugin({
      nocompatible: true  // Enable scrollbar-w-*, scrollbar-h-*, and scrollbar-*-rounded-* utilities
    })
  ]
};
```

--------------------------------

### Install tailwind-scrollbar with npm

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/README.md

Add the tailwind-scrollbar package to your project's development dependencies using npm.

```bash
npm install --save-dev tailwind-scrollbar
```

--------------------------------

### Install tailwind-scrollbar with yarn

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/README.md

Add the tailwind-scrollbar package to your project's development dependencies using yarn.

```bash
yarn add -D tailwind-scrollbar
```

--------------------------------

### Custom Scrollbar Width Example

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/website/docs/examples.md

This example demonstrates how to set a custom width for a vertical scrollbar using Tailwind CSS utilities. It requires the `scrollbar` utility and works in `nocompatible` mode.

```html
<div className="scrollbar-w-8 scrollbar scrollbar-thumb-slate-700 scrollbar-track-slate-300 h-32 overflow-y-scroll scrollbar-hover:scrollbar-thumb-slate-700 scrollbar-active:scrollbar-thumb-slate-700">
    <div className="h-64 bg-slate-400"></div>
</div>
```

```html
<div class="scrollbar-w-8 scrollbar scrollbar-thumb-slate-700 scrollbar-track-slate-300 h-32 overflow-y-scroll">
    <div class="h-64 bg-slate-400"></div>
</div>
```

--------------------------------

### Color Utilities Example

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/browser-support.md

Demonstrates the use of color utilities for scrollbar tracks and thumbs, including opacity modifiers and arbitrary values. Works across all modern browsers.

```html
<div class="scrollbar scrollbar-track-gray-200 scrollbar-thumb-blue-500">Content</div>
<div class="scrollbar scrollbar-track-red-100/50 scrollbar-thumb-blue-500/75">Content</div>
<div class="scrollbar scrollbar-track-[#e5e7eb] scrollbar-thumb-[#3b82f6]">Content</div>
```

--------------------------------

### Plugin Usage with Custom Strategy

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/api-reference/plugin.md

Example of configuring the plugin to use the 'pseudoelements' strategy for scrollbar styling, which targets WebKit browsers specifically.

```javascript
// tailwind.config.js
const plugin = require('tailwind-scrollbar');

module.exports = {
  plugins: [
    plugin({
      preferredStrategy: 'pseudoelements'  // Only webkit on Chrome/Safari, standard on Firefox
    })
  ]
};
```

--------------------------------

### Basic Scrollable Div Example

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/INDEX.md

Create a scrollable div with custom scrollbar track and thumb colors using Tailwind CSS classes.

```html
<div class="
  scrollbar 
  scrollbar-track-gray-200 
  scrollbar-thumb-blue-500
  overflow-y-auto 
  h-96
">
  Scrollable content with custom styling
</div>
```

--------------------------------

### Generic Type Example

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/GLOSSARY.md

Illustrates a generic type in TypeScript, which accepts a type parameter.

```typescript
function<T>(mod: T): T
```

--------------------------------

### Basic Scrollbar Utilities (nocompatible: false)

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/configuration.md

Examples of core scrollbar utilities that work when 'nocompatible' is false (default). These include basic scrollbar styling, thin scrollbars, hiding scrollbars, and color utilities.

```html
<!-- These work -->
<div class="scrollbar scrollbar-track-gray-200 scrollbar-thumb-blue-500">Content</div>
<div class="scrollbar-thin scrollbar-track-gray-100 scrollbar-thumb-gray-400">Content</div>
```

--------------------------------

### HTML Example with Scrollbar Border-Radius Utilities

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/api-reference/utilities.md

Apply scrollbar and border-radius utilities to HTML elements. The scrollbar-thumb-rounded-md and scrollbar-track-rounded-lg classes demonstrate the effect of the generated utilities.

```html
<!-- With border-radius utilities enabled -->
<div class="scrollbar scrollbar-track-gray-200 scrollbar-thumb-blue-500 scrollbar-thumb-rounded-md">
  Content
</div>

<div class="scrollbar scrollbar-track-rounded-lg scrollbar-thumb-rounded-full">
  Content
</div>
```

--------------------------------

### Size Utilities Example

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/browser-support.md

Illustrates custom scrollbar width and height using `scrollbar-w-*` and `scrollbar-h-*` utilities. These are fully supported in Webkit browsers but have no effect in Firefox due to its limited `scrollbar-width` property.

```html
<div class="scrollbar scrollbar-w-20 scrollbar-h-6 scrollbar-track-gray-200 scrollbar-thumb-blue-500">
  On Chrome/Safari/Edge: custom 80px × 24px scrollbars
  On Firefox: Firefox's default widths (no effect from classes)
</div>
```

--------------------------------

### Tailwind Scrollbar Color Examples

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/css-classes.md

Demonstrates how to apply different shades of a color to the scrollbar thumb using Tailwind's numeric modifiers.

```html
<div class="scrollbar-thumb-blue-50">Lightest blue</div>
<div class="scrollbar-thumb-blue-500">Medium blue</div>
<div class="scrollbar-thumb-blue-900">Darkest blue</div>
```

--------------------------------

### Dynamically Generate Utilities with matchUtilities

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/types.md

Use matchUtilities to create dynamic CSS utilities based on theme values. This example shows how to generate track color utilities.

```typescript
function addColorUtilities({ matchUtilities, theme }: TailwindPlugin): void {
  const colors = theme('colors');
  matchUtilities({
    'scrollbar-track': value => ({
      '--scrollbar-track': value
    })
  }, {
    values: colors,
    type: 'color'
  });
}
```

--------------------------------

### Install tailwind-scrollbar with npm, yarn, or pnpm

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/website/docs/getting-started.md

Add the tailwind-scrollbar package to your project's development dependencies using your preferred package manager.

```bash
# npm
npm install --save-dev tailwind-scrollbar
# yarn
yarn add -D tailwind-scrollbar
# pnpm
pnpm add -D tailwind-scrollbar
```

--------------------------------

### Add Static Utilities with addUtilities

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/types.md

Use addUtilities to define static CSS classes that are not tied to theme values. This example adds a basic '.scrollbar' utility.

```javascript
addUtilities({
  '.scrollbar': {
    'scrollbar-width': 'auto'
  }
});
```

--------------------------------

### Advanced Scrollbar Utilities (nocompatible: true)

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/configuration.md

Examples of advanced scrollbar utilities enabled when 'nocompatible' is true. These include custom widths, heights, and border-radius for scrollbar components.

```html
<!-- All compatible mode utilities work -->
<div class="scrollbar scrollbar-track-gray-200 scrollbar-thumb-blue-500">Content</div>

<!-- Plus these additional utilities -->
<div class="scrollbar scrollbar-w-20 scrollbar-h-6 scrollbar-thumb-rounded-md">Content</div>
<div class="scrollbar scrollbar-track-rounded-lg scrollbar-corner-rounded-md">Content</div>

<!-- With arbitrary values -->
<div class="scrollbar scrollbar-w-[24px] scrollbar-h-[12px] scrollbar-thumb-rounded-[16px]">Content</div>
```

--------------------------------

### Color Contrast Example

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/browser-support.md

Ensure sufficient color contrast between the scrollbar track and thumb for visibility. Use online contrast checkers to verify WCAG AA or AAA compliance.

```html
<!-- Good: high contrast -->
<div class="scrollbar scrollbar-track-gray-100 scrollbar-thumb-gray-900">Content</div>

<!-- Poor: low contrast -->
<div class="scrollbar scrollbar-track-gray-200 scrollbar-thumb-gray-100">Content</div>
```

--------------------------------

### Rounded Utilities Example

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/browser-support.md

Shows how to apply rounded corners to scrollbar components using `scrollbar-*-rounded-*` utilities. This feature is supported in Webkit browsers but not in Firefox.

```html
<div class="scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-lg">
  On Chrome/Safari/Edge: rounded scrollbar components
  On Firefox: no rounding (standard properties don't support this)
</div>
```

--------------------------------

### Scrollbar Thumb Color Examples

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/css-classes.md

Use these classes to set the color of the scrollbar thumb. Supports named colors, opacity, and arbitrary values.

```html
<div class="scrollbar scrollbar-thumb-blue-500">Content</div>
<div class="scrollbar scrollbar-thumb-slate-600">Content</div>
```

```html
<div class="scrollbar scrollbar-thumb-blue-500/75">Content</div>
```

```html
<div class="scrollbar scrollbar-thumb-[#3b82f6]">Content</div>
```

--------------------------------

### Custom Scrollbar Dimensions Example

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/browser-support.md

Demonstrates how to apply custom scrollbar dimensions and colors. Chrome, Safari, and Edge will apply these, while Firefox will ignore custom pixel dimensions and use its default or 'thin' settings.

```html
<div class="scrollbar scrollbar-w-20 scrollbar-h-6 scrollbar-track-gray-200 scrollbar-thumb-blue-500">
  Content
</div>
```

--------------------------------

### TypeScript Usage with Generic Type Parameter

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/api-reference/helpers.md

An example illustrating the use of `importDefault` with TypeScript, showcasing how the generic type parameter `T` ensures correct type inference.

```typescript
// Example with a color palette function
const palette: ColorPaletteFunction = importDefault(someModuleImport);

// TypeScript infers the correct type for palette
```

--------------------------------

### Polished Scrollbar Design

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/quick-reference.md

Create a professional-looking scrollbar by combining multiple utilities for track, thumb, and hover states. This example uses gradients and specific color shades for a refined appearance.

```html
<div class="
  scrollbar 
  scrollbar-track-gradient-to-b 
  scrollbar-track-gray-100 
  scrollbar-track-gray-50
  scrollbar-thumb-gradient-to-b
  scrollbar-thumb-blue-500
  scrollbar-thumb-blue-600
  scrollbar-hover:scrollbar-thumb-blue-700
  overflow-y-auto 
  h-96
">
  Professional-looking scrollbar
</div>
```

--------------------------------

### CSS @supports Query for Firefox

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/GLOSSARY.md

The `@supports` at-rule is used for feature detection. This example applies specific scrollbar styles only in Firefox by checking for the `-moz-appearance` property.

```css
@supports (-moz-appearance:none) {
  /* Firefox-specific styles */
  .my-element {
    scrollbar-width: auto;
  }
}
```

--------------------------------

### Incorrect Usage: Rounded Scrollbar Thumb Without nocompatible Mode

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/quick-reference.md

In the default configuration (nocompatible: false), rounded scrollbar utilities like `scrollbar-thumb-rounded-md` are not supported. This example shows the incorrect JavaScript configuration.

```javascript
// Wrong: nocompatible not enabled
module.exports = {
  plugins: [require('tailwind-scrollbar')()]  // nocompatible: false (default)
};
```

--------------------------------

### Plugin Usage with Options

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/types.md

Illustrates how to configure the plugin with specific options for preferred strategy and compatibility.

```typescript
// With options
plugin({
  preferredStrategy: 'pseudoelements',
  nocompatible: true
})
```

--------------------------------

### Interactive Variants Example

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/browser-support.md

Demonstrates styling scrollbar thumb colors on hover using `scrollbar-hover:` variants. This functionality is supported in Webkit browsers but not in Firefox, which handles hover states automatically.

```html
<div class="scrollbar scrollbar-thumb-blue-500 scrollbar-hover:scrollbar-thumb-blue-600">
  On Chrome/Safari/Edge: thumb changes color on hover
  On Firefox: no change on hover (browser handles this automatically)
</div>
```

--------------------------------

### Tailwind Scrollbar: Test Setup for Visible Scrollbars

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/quick-reference.md

Ensure your test environment has overflow set to 'auto' or 'scroll', content that overflows, and explicit height/width constraints to make scrollbars visible. The scrollbar appears when content height exceeds container height.

```html
<!-- Test setup -->
<div class="scrollbar scrollbar-track-gray-200 scrollbar-thumb-blue-500 overflow-y-auto h-96 border border-gray-300">
  <div class="h-full">
    <p>Repeating content that causes overflow</p>
    <p>Repeating content that causes overflow</p>
    <!-- More content to fill 400vh -->
  </div>
</div>
```

--------------------------------

### Deploy Website (SSH)

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/website/README.md

Deploys the website using SSH. Assumes SSH is configured for deployment.

```bash
USE_SSH=true yarn deploy
```

--------------------------------

### Rounded Scrollbar Bars

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/website/docs/examples.md

Apply `scrollbar-*-rounded-*` utilities to create rounded scrollbar thumbs, tracks, or corners. This example makes both the thumb and track fully rounded. Note: These utilities only work in `nocompatible` mode.

```html
<div class="scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar scrollbar-thumb-slate-700 scrollbar-track-slate-300 h-32 overflow-y-scroll">
    <div class="h-64 bg-slate-400"></div>
</div>
```

--------------------------------

### Build Static Website

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/website/README.md

Generates static content for deployment. The output is placed in the 'build' directory.

```bash
yarn build
```

--------------------------------

### Matching Brand Colors for Scrollbar

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/quick-reference.md

Customize scrollbars to match your brand's color palette by applying specific track, thumb, hover, active, and corner colors. This example uses a common blue shade to demonstrate brand integration.

```html
<!-- Assuming brand color: #2563eb (blue-500) -->
<div class="
  scrollbar 
  scrollbar-track-blue-50
  scrollbar-thumb-blue-500
  scrollbar-hover:scrollbar-thumb-blue-600
  scrollbar-active:scrollbar-thumb-blue-700
  scrollbar-corner-blue-100
  overflow-auto
">
  Brand-colored scrollbar
</div>
```

--------------------------------

### CSS Custom Properties Example

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/GLOSSARY.md

CSS Custom Properties (variables) are used to store values like colors and dimensions. This example defines and uses a custom property for the scrollbar track color.

```css
:root {
  --scrollbar-track: #e5e7eb;
}

.my-element {
  scrollbar-track-color: var(--scrollbar-track);
}
```

--------------------------------

### Package.json Main Entry Point

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/architecture.md

This JSON snippet from package.json specifies the main entry point for the plugin's JavaScript code. It ensures that the correct file is loaded when the package is required.

```json
{
  "main": "src/index.js"
}
```

--------------------------------

### Main Plugin Export (index.js) Flow

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/architecture.md

Illustrates the sequence of function calls within the main plugin entry point, showing how configuration options are processed and utilities/variants are registered.

```javascript
plugin.withOptions(options) 
  → validate preferredStrategy
  → addBaseStyles()
  → addBaseSizeUtilities()
  → addColorUtilities()
  → addVariants()
  → if (nocompatible) {
      addRoundedUtilities()
      addSizeUtilities()
    }
```

--------------------------------

### Minimal Plugin Usage

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/types.md

Shows the most basic way to invoke the plugin, utilizing all default configuration options.

```typescript
// Minimal usage (use all defaults)
plugin()
```

--------------------------------

### Deploy Website (No SSH)

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/website/README.md

Deploys the website without using SSH. Requires specifying the GitHub username.

```bash
GIT_USER=<Your GitHub username> yarn deploy
```

--------------------------------

### Register Custom Variant with addVariant

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/types.md

Use addVariant to define new pseudo-class variants for your utilities. This example registers a 'scrollbar-hover' variant.

```javascript
addVariant('scrollbar-hover', '&::-webkit-scrollbar-thumb:hover');
```

--------------------------------

### Configure Scrollbar Plugin (nocompatible: true)

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/configuration.md

Use this configuration to enable advanced scrollbar utilities, providing fine-grained control over dimensions and appearance, at the cost of a larger CSS output.

```javascript
module.exports = {
  plugins: [
    require('tailwind-scrollbar')({ nocompatible: true })
  ]
};
```

--------------------------------

### Apply Styles on Scrollbar Corner Hover

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/css-classes.md

Use the `scrollbar-corner-hover` variant to apply styles when the scrollbar corner is hovered. This example changes the corner color.

```html
<div class="
  scrollbar 
  scrollbar-corner-gray-200 
  scrollbar-corner-hover:scrollbar-corner-gray-400
">
  Content
</div>
```

--------------------------------

### Apply Styles on Scrollbar Track Active

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/css-classes.md

Use the `scrollbar-track-active` variant to apply styles when the scrollbar track is being interacted with. This example changes the track color.

```html
<div class="
  scrollbar 
  scrollbar-track-gray-100 
  scrollbar-track-active:scrollbar-track-gray-300
">
  Content
</div>
```

--------------------------------

### Apply Styles on Scrollbar Track Hover

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/css-classes.md

Use the `scrollbar-track-hover` variant to apply styles when the scrollbar track is hovered. This example changes the track color.

```html
<div class="
  scrollbar 
  scrollbar-track-gray-200 
  scrollbar-track-hover:scrollbar-track-gray-300
">
  Content
</div>
```

--------------------------------

### Scrollbar Track Color Examples

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/css-classes.md

Use these classes to set the background color of the scrollbar track. Supports named colors, opacity, and arbitrary values.

```html
<div class="scrollbar scrollbar-track-gray-200">Content</div>
<div class="scrollbar scrollbar-track-blue-100">Content</div>
<div class="scrollbar scrollbar-track-slate-300">Content</div>
```

```html
<div class="scrollbar scrollbar-track-gray-200/50">Content</div>
<div class="scrollbar scrollbar-track-blue-100/75">Content</div>
```

```html
<div class="scrollbar scrollbar-track-[#e5e7eb]">Content</div>
<div class="scrollbar scrollbar-track-[rgb(229, 231, 235)]">Content</div>
```

--------------------------------

### Styling the Scrollbar Corner

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/website/docs/examples.md

Use `scrollbar-corner-*` utilities to color the scrollbar corner when both vertical and horizontal scrollbars are present. This example shows a sky-blue corner.

```html
<div class="scrollbar-corner-sky-500 scrollbar scrollbar-thumb-slate-700 scrollbar-track-slate-300 h-32 overflow-scroll">
    <div class="h-64 w-[100vw] bg-slate-400"></div>
</div>
```

--------------------------------

### Custom Scrollbar Colors JavaScript Configuration

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/website/docs/examples.md

Legacy configuration for custom scrollbar colors using JavaScript, compatible with older Tailwind CSS setups.

```javascript
module.exports = {
    // ...
    theme: {
        extend: {
            colors: {
                custom: {
                    DEFAULT: '#10b981',
                    light: '#d1fae5',
                },
            },
        },
    },
};
```

--------------------------------

### Tailwind Configuration Integration

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/types.md

Shows how to include the Tailwind Scrollbar plugin with specific options within the tailwind.config.js file.

```javascript
// tailwind.config.js
const plugin = require('tailwind-scrollbar');

module.exports = {
  plugins: [
    plugin({
      preferredStrategy: 'standard',
      nocompatible: false
    })
  ]
};
```

--------------------------------

### Apply Styles on Scrollbar Thumb Hover

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/css-classes.md

Use the `scrollbar-hover` variant to apply styles when the scrollbar thumb is hovered. This example shows changing the thumb color.

```html
<div class="
  scrollbar 
  scrollbar-thumb-blue-400 
  scrollbar-hover:scrollbar-thumb-blue-600
">
  Content
</div>
```

--------------------------------

### Usage in Plugin for flattenColorPalette

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/api-reference/helpers.md

Shows how `importDefault` is used within the plugin to import `flattenColorPalette`, ensuring compatibility with different module systems.

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

--------------------------------

### Validate Configuration Strategy

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/architecture.md

This snippet demonstrates how the plugin validates the 'preferredStrategy' configuration option. It logs a warning and falls back to a default value if an invalid strategy is provided. No exceptions are thrown.

```javascript
if (preferredStrategy !== 'standard' && preferredStrategy !== 'pseudoelements') {
  console.warn('WARNING: tailwind-scrollbar preferredStrategy should be \'standard\' or \'pseudoelements\'');
  preferredStrategy = 'standard';  // Fallback to safe default
}
```

--------------------------------

### Webkit Scrollbar Pseudoelements

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/GLOSSARY.md

Webkit-based browsers (Safari, Chrome, Edge, Opera) use `::-webkit-scrollbar` pseudoelements for styling. This example shows how to set the track color.

```css
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #e5e7eb;
}
```

--------------------------------

### Configure Standard Scrollbar Strategy

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/configuration.md

Use the 'standard' strategy for optimal cross-browser compatibility. This applies standard CSS properties and Webkit pseudoelements.

```javascript
module.exports = {
  plugins: [
    require('tailwind-scrollbar')({ preferredStrategy: 'standard' })
  ]
};
```

```css
.scrollbar {
  scrollbar-width: auto;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  
  &::-webkit-scrollbar {
    width: var(--scrollbar-width, 16px);
    height: var(--scrollbar-height, 16px);
  }
}
```

--------------------------------

### Apply Basic Scrollbar to an Element

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/quick-reference.md

Apply a default scrollbar to a div with overflow-y auto. This example uses standard gray and blue colors for the track and thumb.

```html
<div class="scrollbar overflow-y-auto h-96 scrollbar-track-gray-200 scrollbar-thumb-blue-500">
  Your scrollable content here
</div>
```

--------------------------------

### Standard Strategy Configuration for Tailwind Scrollbar

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/configuration.md

Configure the plugin to use the 'standard' strategy for scrollbar rendering. This is an explicit way to set the preferred strategy.

```javascript
// tailwind.config.js
const plugin = require('tailwind-scrollbar');

module.exports = {
  content: ['./src/**/*.{html,js}'],
  plugins: [
    plugin({
      preferredStrategy: 'standard'
    })
  ]
};
```

--------------------------------

### Apply Custom Scrollbar Sizing in HTML

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/api-reference/utilities.md

Demonstrates applying custom scrollbar width and height utilities to HTML elements using the .scrollbar class. Supports both named Tailwind values and arbitrary pixel or percentage values.

```html
<!-- Custom width and height -->
<div class="scrollbar scrollbar-w-20 scrollbar-h-6 scrollbar-track-gray-200 scrollbar-thumb-blue-500">
  Content with custom-sized scrollbars
</div>

<!-- Arbitrary dimensions -->
<div class="scrollbar scrollbar-w-[24px] scrollbar-h-[12px] scrollbar-track-gray-100 scrollbar-thumb-gray-500">
  Content with arbitrary scrollbar dimensions
</div>
```

--------------------------------

### Apply Styles on Scrollbar Thumb Active

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/css-classes.md

Use the `scrollbar-active` variant to apply styles when the scrollbar thumb is actively being dragged or clicked. This example changes the thumb color.

```html
<div class="
  scrollbar 
  scrollbar-thumb-blue-400 
  scrollbar-active:scrollbar-thumb-blue-700
">
  Content
</div>
```

--------------------------------

### Scrollbar Corner Color Examples

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/css-classes.md

Use these classes to set the color of the scrollbar corner. Supports named colors, opacity, and arbitrary values. Only visible when both scrollbars are present.

```html
<div class="scrollbar scrollbar-corner-gray-300">Content</div>
<div class="scrollbar scrollbar-corner-slate-200">Content</div>
```

```html
<div class="scrollbar scrollbar-corner-gray-300/50">Content</div>
```

```html
<div class="scrollbar scrollbar-corner-[#d1d5db]">Content</div>
```

--------------------------------

### addBaseSizeUtilities

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/api-reference/utilities.md

Adds three core utility classes for enabling and configuring scrollbar styling: `.scrollbar`, `.scrollbar-thin`, and `.scrollbar-none`. These utilities must be applied to a scrollable element to activate custom scrollbar styling.

```APIDOC
## addBaseSizeUtilities

### Description
Adds three core utility classes for enabling and configuring scrollbar styling: `.scrollbar`, `.scrollbar-thin`, and `.scrollbar-none`. These utilities must be applied to a scrollable element to activate custom scrollbar styling.

### Parameters
#### Parameters
- **tailwind** (`TailwindPlugin`) - Required - The Tailwind plugin API object with `addUtilities` method
- **preferredStrategy** (`'standard' | 'pseudoelements'`) - Required - Determines how standard CSS properties are applied (same as addBaseStyles)

### Generated Utilities
#### .scrollbar
Enables scrollbar styling with default sizing.
```css
.scrollbar {
  scrollbar-width: auto;  /* Firefox: automatic width */
  scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
  
  &::-webkit-scrollbar {
    display: block;
    width: var(--scrollbar-width, 16px);
    height: var(--scrollbar-height, 16px);
  }
}
```

#### .scrollbar-thin
Enables scrollbar styling with reduced sizing (8px instead of 16px).
```css
.scrollbar-thin {
  scrollbar-width: thin;  /* Firefox: thin width */
  scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
  
  &::-webkit-scrollbar {
    display: block;
    width: 8px;
    height: 8px;
  }
}
```

#### .scrollbar-none
Completely hides the scrollbar.
```css
.scrollbar-none {
  scrollbar-width: none;  /* Firefox: hide scrollbar */
  
  &::-webkit-scrollbar {
    display: none;
  }
}
```

### Usage Example
```html
<!-- Default scrollbar styling -->
<div class="scrollbar scrollbar-track-gray-200 scrollbar-thumb-blue-500">
  <!-- Scrollable content here -->
</div>

<!-- Thin scrollbar -->
<div class="scrollbar-thin scrollbar-track-gray-100 scrollbar-thumb-gray-400">
  <!-- Scrollable content here -->
</div>

<!-- Hide scrollbar -->
<div class="scrollbar-none">
  <!-- Scrollable content here -->
</div>
```
```

--------------------------------

### Configurable Plugin Factory

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/architecture.md

Uses Tailwind's plugin.withOptions() API to create a configurable plugin. The outer function receives options, and the inner function receives the Tailwind context.

```javascript
plugin.withOptions((options = {}) => (tailwind) => {
  // Configuration validation and utility registration
})
```

--------------------------------

### Configure tailwind-scrollbar plugin

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/README.md

Import the plugin into your Tailwind CSS configuration file to enable its utilities. Ensure Tailwind CSS is imported first.

```css
@import 'tailwindcss';

/* ... */

@plugin 'tailwind-scrollbar';
```

--------------------------------

### Registering Scrollbar Utilities

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/architecture.md

Demonstrates the core functions within utilities.js responsible for registering various scrollbar-related CSS utilities with Tailwind, including base styles, sizes, and colors.

```javascript
// Registers base CSS resets
addBaseStyles()
// Registers .scrollbar, .scrollbar-thin, .scrollbar-none
addBaseSizeUtilities()
// Registers dynamic color utilities using theme colors
addColorUtilities()
// Registers border-radius utilities (nocompatible mode)
addRoundedUtilities()
// Registers width/height utilities (nocompatible mode)
addSizeUtilities()
```

--------------------------------

### Generate TypeScript Definitions

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/architecture.md

Run this npm script to generate TypeScript definition files from JSDoc comments. These definitions are crucial for IDE autocompletion and for use in TypeScript projects.

```bash
npm run build-types  # Generates .d.ts files from JSDoc
```

--------------------------------

### Create Custom Scrollable Div Component

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/architecture.md

Example of creating a custom React component that wraps a div with pre-defined scrollbar classes. This allows for easy reuse of specific scrollbar styles.

```jsx
function ScrollableDiv({ className, ...props }) {
  return (
    <div className={`scrollbar scrollbar-track-gray-200 scrollbar-thumb-blue-500 ${className}`} {...props} />
  );
}
```

--------------------------------

### Main Plugin Export with Options

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/INDEX.md

Exports the main plugin function that accepts options to configure the scrollbar behavior.

```typescript
plugin.withOptions(
  (options?: PluginOptions) => (tailwind: TailwindPlugin) => void
)
```

--------------------------------

### Responsive Scrollbar Styling

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/browser-support.md

Demonstrates how scrollbar styling can change at different responsive breakpoints using Tailwind CSS classes. Ensure to test on various devices.

```html
<div class="
  scrollbar 
  scrollbar-track-gray-200 
  md:scrollbar-track-gray-300
  scrollbar-thumb-blue-500 
  md:scrollbar-thumb-blue-600
  overflow-y-auto
">
  Content
</div>
```

--------------------------------

### Incorrect Usage: Hover and Active States in Firefox

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/quick-reference.md

Hover and active state utilities for scrollbars (e.g., `scrollbar-hover:scrollbar-thumb-blue-600`) are not supported in Firefox. This HTML example shows utilities that will be ignored by Firefox.

```html
<!-- Firefox will ignore these -->
<div class="
  scrollbar 
  scrollbar-hover:scrollbar-thumb-blue-600
  scrollbar-active:scrollbar-thumb-blue-700
">
  Content
</div>
```

--------------------------------

### Configure multiple options in JavaScript config

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/website/docs/getting-started.md

Combine multiple configuration options, such as `nocompatible` and `preferredStrategy`, within the JavaScript configuration for tailwind-scrollbar.

```javascript
module.exports = {
    // ...
    plugins: [
        // ...
        require('tailwind-scrollbar')({
            nocompatible: true,
            preferredStrategy: 'pseudoelements',
        }),
    ],
};
```

--------------------------------

### Enable nocompatible utilities in JavaScript config

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/website/docs/getting-started.md

Configure the tailwind-scrollbar plugin to enable additional utilities by passing `{ nocompatible: true }` to the require function in the JavaScript config.

```javascript
module.exports = {
    // ...
    plugins: [
        // ...
        require('tailwind-scrollbar')({ nocompatible: true }),
    ],
};
```

--------------------------------

### Correct Usage: Scrollbar on Scrollable Element

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/quick-reference.md

Ensure elements have overflow and sizing classes applied when using scrollbar utilities. This example shows the correct way to make an element scrollable with custom scrollbar styles.

```html
<!-- Right: element is actually scrollable -->
<div class="
  scrollbar 
  scrollbar-track-gray-200 
  scrollbar-thumb-blue-500 
  overflow-y-auto 
  max-h-96
">
  Content
</div>
```

--------------------------------

### Reduced Motion Accessibility

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/browser-support.md

Consider user preferences for reduced motion by using subtle color changes for scrollbar hover states. This example shows how to apply different hover styles when reduced motion is preferred.

```html
<!-- Consider user preferences -->
<div class="
  scrollbar 
  scrollbar-thumb-blue-500
  scrollbar-hover:scrollbar-thumb-blue-600
  prefers-reduced-motion:scrollbar-hover:scrollbar-thumb-blue-500
">
  Content respecting motion preferences
</div>
```

--------------------------------

### Directory Structure

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/INDEX.md

This snippet shows the project's directory structure. It outlines the purpose of each file and directory within the tailwind-scrollbar project.

```text
output/
├── INDEX.md                          # This file
├── quick-reference.md                # Common patterns and examples
├── configuration.md                  # Plugin options and configuration
├── css-classes.md                    # Complete CSS class reference
├── types.md                          # TypeScript type definitions
├── browser-support.md                # Browser compatibility
├── architecture.md                   # Implementation details
└── api-reference/
    ├── plugin.md                     # Main plugin export
    ├── utilities.md                  # Utility function documentation
    ├── variants.md                   # Custom variant functions
    └── helpers.md                    # Helper functions
```

--------------------------------

### Composing Multiple Tailwind Scrollbar Classes

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/css-classes.md

Shows how to combine various Tailwind scrollbar utility classes to create a fully customized and interactive scrollbar appearance.

```html
<div class="
  scrollbar 
  scrollbar-w-16 
  scrollbar-h-4
  scrollbar-track-gray-100 
  scrollbar-thumb-blue-500 
  scrollbar-corner-gray-200
  scrollbar-thumb-rounded-md
  scrollbar-track-rounded-lg
  scrollbar-hover:scrollbar-thumb-blue-600
  scrollbar-track-hover:scrollbar-track-gray-200
">
  Fully styled, interactive scrollbar
</div>
```

--------------------------------

### Correct Usage: Element Hover and Active States for Styling

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/quick-reference.md

For styling the element itself during hover or active states, use standard Tailwind CSS `hover:` and `active:` prefixes. This example combines element styling with scrollbar styling, noting that scrollbar hover/active states are webkit-specific.

```html
<!-- For styling the element itself during hover -->
<div class="
  scrollbar 
  hover:bg-blue-50
  active:bg-blue-100
  scrollbar-hover:scrollbar-thumb-blue-600
">
  Content with both element and scrollbar states
</div>
```

--------------------------------

### Configure multiple options in CSS config

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/website/docs/getting-started.md

Combine multiple configuration options, such as `nocompatible` and `preferredStrategy`, within the CSS configuration for tailwind-scrollbar.

```css
@import 'tailwindcss';

/* ... */

@plugin 'tailwind-scrollbar' {
    nocompatible: true;
    preferredStrategy: 'pseudoelements';
}
```

--------------------------------

### Document Structure

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/README.md

This snippet outlines the directory structure of the tailwind-scrollbar documentation.

```text
output/
├── INDEX.md                    # Master index and navigation guide
├── README.md                   # This file
├── GLOSSARY.md                # Terminology reference
├── quick-reference.md         # Common patterns and examples
├── configuration.md           # Plugin options and setup
├── css-classes.md            # Complete CSS class reference
├── types.md                  # TypeScript types and interfaces
├── browser-support.md        # Browser compatibility matrix
├── architecture.md           # Implementation and design patterns
└── api-reference/
    ├── plugin.md            # Main plugin export
    ├── utilities.md         # Utility generation functions
    ├── variants.md          # Custom variant registration
    └── helpers.md           # Internal helper functions

```

--------------------------------

### Apply Basic Scrollbar Styles

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/README.md

Use the generated utility classes to style scrollbars on HTML elements. Ensure the element has overflow and a defined height to see the scrollbar.

```html
<div class="scrollbar scrollbar-track-gray-200 scrollbar-thumb-blue-500 overflow-y-auto h-96">
  Content
</div>
```

--------------------------------

### Plugin Usage with Lowercase Alias

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/types.md

Demonstrates using the lowercase alias 'preferredstrategy' for backward compatibility when configuring the plugin.

```typescript
// With lowercase alias
plugin({
  preferredstrategy: 'standard'
})
```

--------------------------------

### Minimal Scrollbar Configuration

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/quick-reference.md

Apply a basic scrollbar with only the thumb color specified. This is useful for quick styling when only the thumb appearance needs to be adjusted.

```html
<div class="scrollbar scrollbar-thumb-gray-400 overflow-y-auto h-96">
  Content
</div>
```

--------------------------------

### Configure Scrollbar Plugin (Default)

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/configuration.md

Use this configuration to generate only core scrollbar utilities, resulting in smaller CSS output and better compatibility with older environments. This is the default behavior.

```javascript
module.exports = {
  plugins: [
    require('tailwind-scrollbar')()  // or explicitly: { nocompatible: false }
  ]
};
```

--------------------------------

### Add Base Size Utilities for Scrollbars

Source: https://github.com/adoxography/tailwind-scrollbar/blob/main/_autodocs/api-reference/utilities.md

Generates core utility classes (.scrollbar, .scrollbar-thin, .scrollbar-none) for enabling and configuring scrollbar styling. These must be applied to a scrollable element.

```typescript
function addBaseSizeUtilities(
  tailwind: TailwindPlugin,
  preferredStrategy: 'standard' | 'pseudoelements'
): void

```

```css
.scrollbar {
  scrollbar-width: auto;  /* Firefox: automatic width */
  scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
  
  &::-webkit-scrollbar {
    display: block;
    width: var(--scrollbar-width, 16px);
    height: var(--scrollbar-height, 16px);
  }
}

```

```css
.scrollbar-thin {
  scrollbar-width: thin;  /* Firefox: thin width */
  scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
  
  &::-webkit-scrollbar {
    display: block;
    width: 8px;
    height: 8px;
  }
}

```

```css
.scrollbar-none {
  scrollbar-width: none;  /* Firefox: hide scrollbar */
  
  &::-webkit-scrollbar {
    display: none;
  }
}

```

```html
<!-- Default scrollbar styling -->
<div class="scrollbar scrollbar-track-gray-200 scrollbar-thumb-blue-500">
  <!-- Scrollable content here -->
</div>

<!-- Thin scrollbar -->
<div class="scrollbar-thin scrollbar-track-gray-100 scrollbar-thumb-gray-400">
  <!-- Scrollable content here -->
</div>

<!-- Hide scrollbar -->
<div class="scrollbar-none">
  <!-- Scrollable content here -->
</div>

```