0
# Helper Functions
1

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

4
## Capabilities
5

6
### importDefault Function
7

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

10
```javascript { .api }
11
/**
12
 * Gets the underlying default import of a module.
13
 * This is used to handle internal imports from Tailwind, since Tailwind Play
14
 * handles these imports differently than other environments.
15
 * @param mod - The module that may have __esModule wrapper
16
 * @returns The bare export
17
 */
18
function importDefault<T>(mod: T | { __esModule: unknown, default: T }): T;
19
```
20

21
**Usage Examples:**
22

23
```javascript
24
const { importDefault } = require('tailwind-scrollbar/src/helpers');
25

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

30
// Use the imported module
31
const result = safeImport.someFunction();
32
```
33

34
### Use Cases
35

36
This helper is primarily useful when:
37

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

42
### Implementation Details
43

44
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.
45

46
This pattern is necessary because different environments handle ES6 modules differently:
47
- **Node.js with CommonJS**: Modules are imported directly
48
- **Tailwind Play and other ES6 environments**: Modules may be wrapped with `__esModule` metadata
49

50
**Internal Usage:**
51

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

54
```javascript
55
const flattenColorPaletteImport = require('tailwindcss/lib/util/flattenColorPalette');
56
const flattenColorPalette = importDefault(flattenColorPaletteImport);
57
```
58

59
### Utility Functions
60

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

63
```javascript { .api }
64
/**
65
 * Base resets to make the plugin's utilities work
66
 */
67
function addBaseStyles(tailwind: TailwindPlugin, preferredStrategy: 'standard' | 'pseudoelements'): void;
68

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

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

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

84
/**
85
 * Adds scrollbar-w-* and scrollbar-h-* utilities
86
 */
87
function addSizeUtilities(tailwind: TailwindPlugin): void;
88

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

94
const {
95
  addBaseStyles,
96
  addBaseSizeUtilities,
97
  addColorUtilities,
98
  addRoundedUtilities,
99
  addSizeUtilities
100
} = require('tailwind-scrollbar/src/utilities');
101

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

105
**Usage Examples:**
106

107
```javascript
108
// Creating a custom plugin that extends tailwind-scrollbar
109
const plugin = require('tailwindcss/plugin');
110
const { addColorUtilities, addBaseStyles } = require('tailwind-scrollbar/src/utilities');
111

112
const customScrollbarPlugin = plugin(function(tailwind) {
113
  // Add base styles with standard strategy
114
  addBaseStyles(tailwind, 'standard');
115
  
116
  // Add color utilities
117
  addColorUtilities(tailwind);
118
  
119
  // Add your custom utilities here
120
  tailwind.addUtilities({
121
    '.scrollbar-glow': {
122
      '&::-webkit-scrollbar-thumb': {
123
        'box-shadow': '0 0 6px rgba(59, 130, 246, 0.5)'
124
      }
125
    }
126
  });
127
});
128
```