tailwind-scrollbar-hide

tailwind-scrollbar-hide is a lightweight Tailwind CSS plugin that adds two utility classes, scrollbar-hide and scrollbar-default, for visually hiding an element’s scrollbar without disabling scroll behavior. It ships pure CSS rules for Firefox’s scrollbar-width property and the WebKit-specific ::-webkit-scrollbar pseudo-element, covering the two mechanisms browsers use to render scrollbars.

The plugin supports Tailwind v2, v3, and v4 with dedicated integration paths for each: a classic plugins-array export for v2/v3 configs, and a CSS-only @import for v4’s new utility API. It has zero runtime dependencies and is commonly reached for in carousels, horizontally scrolling navigation bars, chat threads, and other UI patterns where a visible scrollbar would clutter the design.

What You Get

• scrollbar-hide utility - a single class that removes scrollbar chrome across Firefox, Safari, and Chrome while content stays scrollable
• scrollbar-default utility - a companion class to restore native scrollbar rendering, useful for responsive breakpoint overrides like md:scrollbar-default
• Tailwind v2, v3, and v4 support - a plugins-array export for legacy configs and a pure-CSS @import 'tailwind-scrollbar-hide/v4' path for the new v4 utility API
• Zero runtime dependencies - the published package has no dependencies beyond a tailwindcss peer dependency

Common Use Cases

• Horizontal navigation strips - tab bars or pill menus that scroll horizontally without showing a scrollbar track
• Chat and message threads - scrollable message lists where a visible scrollbar would clutter a chat UI
• Image and card carousels - swipeable galleries that need scroll-snap behavior without visual scrollbar clutter
• Custom-scrollbar design systems - projects that want to hide the native scrollbar and layer in a custom scroll indicator instead

Under The Hood

Architecture The package is a single-purpose Tailwind plugin: src/index.ts exports one function that calls Tailwind’s addUtilities API to register the .scrollbar-hide and .scrollbar-default classes with the vendor-prefixed properties each browser engine needs (scrollbar-width for Firefox, ::-webkit-scrollbar for Safari/Chrome). src/styles.css mirrors the same two rule sets using Tailwind v4’s native @utility at-rule so the package can also be consumed as a pure-CSS import with no JS plugin registration. There is no shared internal module between the two entry points, so the JS-plugin and CSS-only definitions are kept in sync by hand rather than generated from one source — that hand-sync is what would break first if the utility set ever grew beyond two classes.

Tech Stack The library is authored in TypeScript (5.8.3) and compiled with a bare tsc build script; the only devDependency beyond @types/node is tailwindcss itself (4.1.8), used to validate the v4 CSS syntax during development. Publishing runs through a GitHub Actions workflow (npm-publish.yml) alongside a separate deploy-pages.yml that builds a small Vite-based playground/ app into the project’s live GitHub Pages demo. The repository is managed as a pnpm workspace (pnpm-workspace.yaml) linking the plugin package and the playground demo.

Code Quality No test files, test framework, or test script exist anywhere in the repository — package.json defines only build and prepublishOnly. Because the plugin does no runtime logic beyond building a static utilities object, there is no error handling to speak of. Naming is minimal and clear (scrollbarHide, addUtilities), but the module’s default export is explicitly cast through any and back to () => void to paper over Tailwind’s differing v3/v4 plugin type signatures, sacrificing real type safety at the one point it would matter most. A .prettierrc enforces formatting, but there is no ESLint configuration and CI does not run a lint or test gate before publish.

What Makes It Unique The project is candid that it isn’t solving anything novel — its own README points users to Tailwind’s documented “complex utilities” pattern as a viable DIY alternative and credits tailwindcss-forms and a Tailwind CHANGELOG discussion as direct inspiration. Its only distinguishing contribution is packaging the same handful of cross-browser scrollbar rules behind three different Tailwind plugin surfaces (a v2/v3 JS plugin and a v4 CSS @utility import) so consumers don’t have to hand-roll the vendor-prefixed selectors themselves.