Complete list of utilities/variants

Base utilities

These utilities initialize scrollbar styling. You always need one of them, even if you're using custom widths.

Utility	Effect	Notes
scrollbar	Enables custom scrollbar styling, using the default width	On Firefox, this is scrollbar-width: auto. Chrome is hard coded to 16px for consistency.
scrollbar-thin	Enables custom scrollbar styling, using the thin width	On Firefox, this is scrollbar-width: thin. Chrome is hard coded to 8px for consistency.
scrollbar-none	Hides the scrollbar completely	Because of browser quirks, this cannot be used to hide an existing styled scrollbar - i.e. scrollbar hover:scrollbar-none will not work.

Colour utilities

All of the asterisks can be replaced with any tailwind colour, including arbitrary values and opacity modifiers. With the exception of the width utilities, all utilities are inherited by child elements.

Utility	Effect	Notes
scrollbar-thumb-*	Sets the colour of the scrollbar thumb
scrollbar-track-*	Sets the colour of the scrollbar track
scrollbar-corner-*	Sets the colour of the scrollbar corner	The corner will only appear if you have both vertical and horizontal scrollbars.

Nocompatible utilities

These styles are only available in nocompatible mode. They won't have any effect on standards-track scrollbars, such as those used by Firefox or by Chrome/Edge by default.

Utility	Effect	Notes
scrollbar-w-*	Sets the width of vertical scrollbars	The asterisk can be replaced with any Tailwind width setting, including arbitrary values. Only applies to scrollbars styled with scrollbar (not scrollbar-thin).
scrollbar-h-*	Sets the height of horizontal scrollbars	The asterisk can be replaced with any Tailwind height setting, including arbitrary values. Only applies to scrollbars styled with scrollbar (not scrollbar-thin).
scrollbar-thumb-rounded-*	Rounds a scrollbar thumb's corners	The asterisk can be replaced with any Tailwind rounded setting, including arbitrary values.
scrollbar-track-rounded-*	Rounds a scrollbar track's corners	See above, but for the track
scrollbar-corner-rounded-*	Rounds a scrollbar corner's corners	See above, but for the corner pseudoelement created when both horizontal and vertial scrollbars are present

Variants

warning

These variants are not available in tailwind-scrollbar@v3. Use the built-in hover: and active: instead.

These variants don't have any effect on standards-track scrollbars, such as those used by Firefox or by Chrome/Edge by default. The responsibility of styling hover and active states is assumed by the browser in that scenario.

Variant	Effect
scrollbar-hover:	Applies a utility when the scrollbar's thumb is hovered
scrollbar-active:	Applies a utility when the scrollbar's thumb is active
scrollbar-track-hover:	Applies a utility when the scrollbar's track is hovered
scrollbar-track-active:	Applies a utility when the scrollbar's track is active
scrollbar-corner-hover:	Applies a utility when the scrollbar's corner is hovered