https://github.com/reslear/tailwind-scrollbar-hide

tailwindcss plugin for hide scrollbar
https://github.com/reslear/tailwind-scrollbar-hide

Last synced: 13 days ago
JSON representation

tailwindcss plugin for hide scrollbar

• Host: GitHub
• URL: https://github.com/reslear/tailwind-scrollbar-hide
• Owner: reslear
• License: mit
• Created: 2021-01-31T17:12:47.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-07-09T02:43:25.000Z (4 months ago)
• Last Synced: 2024-09-28T05:55:04.893Z (about 2 months ago)
• Language: Vue
• Size: 198 KB
• Stars: 234
• Watchers: 1
• Forks: 8
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-tailwindcss - Scrollbar Hide - Adds `scrollbar-hide` class for visual hide scrollbar. (Plugins)

README

        
# tailwind-scrollbar-hide

Tailwind plugin for hide scrollbars, although the element can still be scrolled if the element's content overflows.

* Also available [unocss-preset-scrollbar-hide](https://github.com/reslear/unocss-preset-scrollbar-hide)

[![npm](https://img.shields.io/npm/v/tailwind-scrollbar-hide)](https://www.npmjs.com/package/tailwind-scrollbar-hide)

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

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

![Dependents (via libraries.io)](https://img.shields.io/librariesio/dependents/npm/tailwind-scrollbar-hide?0)

[![install size](https://packagephobia.com/badge?p=tailwind-scrollbar-hide)](https://packagephobia.com/result?p=tailwind-scrollbar-hide)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

![Firefox >=64 Chrome >= 2 Safari >= 4 Internet Explorer >= 10 ](https://badges.herokuapp.com/browsers?googlechrome=2&firefox=64&safari=4&iexplore=10)

![tailwind-scrollbar-hide animation demo](https://user-images.githubusercontent.com/12596485/142972957-272010d3-29f6-4be7-99e1-dd03e7a8b92b.gif)

[Live demo](https://reslear.github.io/packages/tailwind-scroll-hide/index.html)

## Installation

Install the plugin from npm:

```sh

# Using npm

npm install tailwind-scrollbar-hide

# Using Yarn

yarn add tailwind-scrollbar-hide

# Using pnpm

pnpm add tailwind-scrollbar-hide

```

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

```js

// tailwind.config.js

module.exports = {

  theme: {

    // ...

  },

  plugins: [

    require('tailwind-scrollbar-hide')

    // ...

  ]

}

```

## Usage

Use in you template `scrollbar-hide` for visual hiding scrollbar

```html

...

```


or restore default value use `scrollbar-default`

> ⚠️ webkit overriding not working https://github.com/reslear/tailwind-scrollbar-hide/issues/19#issuecomment-1086949110 need switch breakpoint system

```html

...

```


## License

[MIT](./LICENSE)