https://github.com/adoxography/tailwind-scrollbar

Scrollbar plugin for Tailwind CSS
https://github.com/adoxography/tailwind-scrollbar

Last synced: 4 months ago
JSON representation

Scrollbar plugin for Tailwind CSS

• Host: GitHub
• URL: https://github.com/adoxography/tailwind-scrollbar
• Owner: adoxography
• License: mit
• Created: 2020-09-01T22:23:57.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-09-22T20:26:36.000Z (5 months ago)
• Last Synced: 2024-10-07T16:04:21.420Z (4 months ago)
• Language: JavaScript
• Size: 1.08 MB
• Stars: 952
• Watchers: 7
• Forks: 39
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - adoxography/tailwind-scrollbar - Scrollbar plugin for Tailwind CSS (JavaScript)

README

        
# Scrollbar Plugin for Tailwind CSS

![Tests](https://github.com/adoxography/tailwind-scrollbar/workflows/Tests/badge.svg)

[![Codacy Badge](https://app.codacy.com/project/badge/Grade/af892fe4afc048c4860462c5fc736675)](https://www.codacy.com/gh/adoxography/tailwind-scrollbar/dashboard?utm_source=github.com&utm_medium=referral&utm_content=adoxography/tailwind-scrollbar&utm_campaign=Badge_Grade)

![npm](https://img.shields.io/npm/dt/tailwind-scrollbar)

`tailwind-scrollbar` is a plugin for [Tailwind CSS](https://tailwindcss.com) that adds styling utilities for scrollbars with cross-browser support.

## Motivation

There are currently two competing standards for styling scrollbars amongst browsers: the [scrollbar-width](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width) and [scrollbar-color](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color) properties used by Firefox and newer Chromium-based browsers, and the [::-webkit-scrollbar](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar) family of pseudoelements used by everything else. This plugin defines a single API for configuring both standards at once from within Tailwind.

## Installation

1. Add the package to your project

```bash

# npm

npm install --save-dev tailwind-scrollbar

# yarn

yarn add -D tailwind-scrollbar

# pnpm

pnpm add -D tailwind-scrollbar

```

2. Add it to the plugins array of your Tailwind config

```javascript

module.exports = {

    // ...

    plugins: [

        // ...

        require('tailwind-scrollbar'),

    ],

};

```

## Usage

See the [documentation](https://adoxography.github.io/tailwind-scrollbar/examples).

## License

This project is licensed under the [MIT License](/LICENSE).