tailwind-scrollbar
Advanced tools
Adds styling utilities for scrollbars in Firefox and webkit-based browsers.
yarn add -D tailwind-scrollbar
or
npm install --save-dev tailwind-scrollbar
Add it to the plugins array of your Tailwind config.
plugins: [
// ...
require('tailwind-scrollbar')(),
],
For every element that you want to style, add either the .scrollbar or .scrollbar-thin class. You may then add any scrollbar-track-{color}, scrollbar-thumb-{color} or hover:scrollbar-thumb-{color} classes you like. (Note that hover:scrollbar-thumb-{color} classes only have effects in webkit-based browsers.
This project is licensed under the MIT License.
SimpleBar is a custom scrollbar library that aims to be simple and lightweight. It provides a more consistent scrollbar appearance across different browsers and operating systems. Unlike tailwind-scrollbar, SimpleBar is not specifically designed for Tailwind CSS but can be integrated with it.
React Custom Scrollbars is a customizable scrollbar component for React. It provides a more flexible and customizable approach to styling scrollbars compared to tailwind-scrollbar, but it requires more setup and is specific to React applications.
OverlayScrollbars is a highly customizable scrollbar library that can be used with various frameworks, including vanilla JavaScript, React, and Angular. It offers more advanced features and customization options compared to tailwind-scrollbar, but it is also more complex to set up.
FAQs
Tailwind plugin for styling scrollbars
The npm package tailwind-scrollbar receives a total of 600,996 weekly downloads. As such, tailwind-scrollbar popularity was classified as popular.
We found that tailwind-scrollbar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Five malicious NuGet packages impersonate Chinese .NET libraries to deploy a stealer targeting browser credentials, crypto wallets, SSH keys, and local files.
Security News
pnpm 11 turns on a 1-day Minimum Release Age and blocks exotic subdeps by default, adding safeguards against fast-moving supply chain attacks.
Security News
The remediated findings include organization permission bugs, stale project access after transfers, OIDC replay edge cases, audit logging gaps, and an IDOR in API token deletion.