How to Hide Scrollbars in Tailwind Without Custom Classes or @layer?

[MonaAghili]

We are using Tailwind CSS in a library and need to remove the default browser scrollbar using the following styles:

.hide-scrollbar {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

However, since we are working within a library, we cannot add custom classes or use @layer to include these styles.

Is there a way to apply these styles directly to the HTML or elements without relying on custom classes or modifying Tailwind’s configuration?

[wongjn]

Yep:

<div class="[scrollbar-width:none] [&::-webkit-scrollbar]:hidden">

[MonaAghili]

Thanks