https://github.com/jonstuebe/tailwindcss-scrollbar

utility classes for webkit based scrollbars
https://github.com/jonstuebe/tailwindcss-scrollbar

css javascript tailwind tailwindcss

Last synced: 2 months ago
JSON representation

utility classes for webkit based scrollbars

• Host: GitHub
• URL: https://github.com/jonstuebe/tailwindcss-scrollbar
• Owner: jonstuebe
• Created: 2021-01-18T22:39:15.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-01-18T22:39:30.000Z (almost 4 years ago)
• Last Synced: 2024-10-19T12:54:21.698Z (3 months ago)
• Topics: css, javascript, tailwind, tailwindcss
• Language: JavaScript
• Homepage:
• Size: 10.7 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# tailwindcss-scrollbar

The `tailwindcss-scrollbar` plugin adds a set of customizable utility classes that you can use to add custom scrollbars in `webkit` based browsers.

## Installation

Install the plugin from npm

```bash

# Using npm

npm install tailwindcss-scrollbar

# Using yarn

yarn add tailwindcss-scrollbar

```

Then add the plugin to your `tailwind.config.js` file:

```javascript

// tailwind.config.js

module.exports = {

  theme: {

    // ...

  },

  plugins: [

    require("tailwindcss-scrollbar"),

    // ...

  ],

};

```

## Usage

Now you can use the utility classes to add your custom scrollbar to any html/jsx:

```html

  ...

  

    ...

  

```

```jsx

{/* Next.js _document.js */}

  ...

  

  ...

```

### Width modifiers

Width modifiers allow you to adjust the width of the scrollbar. This follows the values from `theme.spacing`.

```html

  ...

  

    ...

  

```

### Color modifiers

Both the `thumb` and `track` have color modifiers based off of `theme.colors` (see above examples).

### Variants

If you want to add other variants such as `dark`, `responsive`, etc, add them to your config like so:

```javascript

// tailwind.config.js

module.exports = {

  theme: {

    // ...

  },

  plugins: [

    require("tailwindcss-scrollbar"),

    // ...

  ],

  variants: {

    scrollbar: ["dark"],

    // ...

  },

};

```