Ideas

Scrollbar utilities

Tailwind CSS v4.3 ships three new utilities scrollbar-auto, scrollbar-thin and scrollbar-none which are backed by the CSS scrollbar-width property. Previously, controlling scrollbar appearance meant reaching for a plugin or writing ::-webkit-scrollbar overrides yourself.

ℹ️ scrollbar-{auto,thin,none} is only available in Tailwind CSS Insiders builds and v4.3.0+, so 4.1.x releases won’t have this utility yet

scrollbar-none is the most commonly reached-for one. It’s useful for carousels, horizontal scroll containers, and any UI where the scrollbar would look visually noisy while keeping the content actually scrollable via touch or keyboard.

ℹ️ Firefox has had full scrollbar-width support for years. Chromium added it in 2024 as part of Baseline adoption. Safari/WebKit still requires ::-webkit-scrollbar: none as a fallback for scrollbar-none, which is why Tailwind’s CSS internal implementation includes both, so you don’t need to write the fallback manually.

scrollbar-none is not the same as overflow: hidden. One common mistake I often encounter is developers using overflow: hidden to hide scrollbars, which accidentally removes scrolling entirely. scrollbar-none hides the visual track while keeping scrolling intact. Users on touch devices can still swipe, and keyboard users can still Tab and arrow through content.