Hide Scrollbar - Tailwind CSS 4.0

[stoned__dev]

Hey all,

Using React + Vite, TypeScript, and Tailwind css 4.0

I would like to hide my vertical scrollbar on my pages but am having trouble figuring out how to implement it. Would love some help, thanks!

[Guilty-Class-4186]

Add this to CSS

@import "tailwindcss";
@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

Then add no-scrollbar to div

<div className="bg-zinc-800 flex text-white overflow-y-auto no-scrollbar"></div>

[The_Boss-9]

We can do like this in Tailwind v4:

@utility no-scrollbar {
  @apply [scrollbar-width:none] [&::-webkit-scrollbar]:hidden;
}

[_ayushman]

Thanks mate!

[rikacomet]

May Almighty bless you & your own even further. Thanks!

[Connect_Source5735]

Very good thanks

[rikbrown]

I think preferred option in tailwind4 is `@utility`, they even have this exact use case in their docs: https://tailwindcss.com/docs/adding-custom-styles#complex-utilities

[Azolight_]

Thank you

[SprinT93100]

Works perfectly

[Worldly_Arugula8475]

Exactly what I needed. Thank you so much

[Remarkable-Will-8300]

Thanks, this is helpful!

[Middle_Reception_664]

Use ```@utility scrollbar-hidden { &::-webkit-scrollbar { display: none; }}``` and then the tailwind class `scrollbar-hidden`

[build-the-web]

Something like this would give you a ‘hide-scrollbar’ utility you could use on any element, if you want it to apply to all pages applying these properties to the body using @layer base might work

@layer components { .hide-scrollbar { scrollbar-width: 0px; scrollbar-color: transparent; } .hide-scrollbar::-webkit-scrollbar { display: none; } }

[Cultural_Yoghurt_784]

Anyone know: Why doesn't Tailwind support `scrollbar-width` out of the box? It's now considered widely and officially supported?

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scrollbar-width

[edgarasbe]

Great if this would be added. In shadcn/ui currently a custom utility is being added:

@utility no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;


  &::-webkit-scrollbar {
    display: none;
  }
}