How to create scrollable element in Tailwind without a scrollbar

Question

I'm trying to recreate a horizontal scroll navbar with tailwind without a scrollbar on the bottom like this example (reduce the width of your screen to be able to scroll)

https://getbootstrap.com/docs/5.0/examples/blog/

I tried the following using Tailwind but I wasn't able to figure out how to remove the horizontal scrollbar that appears like the bootstrap example above. Could someone help?

<ul class="flex overflow-x-auto whitespace-nowrap p-4">
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
  <li><a href="/" class="p-2">Nav Item</a></li>
</ul>

Steve O · Accepted Answer · 2021-03-02 09:27:29Z

112

To hide the scrollbar you'll need to style it directly:

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

You could easily add these as Tailwind utilities using a plugin in your config: https://tailwindcss.com/docs/plugins#adding-utilities

Further reading:

https://css-tricks.com/almanac/properties/s/scrollbar/ https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

answered Mar 2, 2021 at 9:27

Steve O

5,8542 gold badges27 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

vince Over a year ago

That worked! Is there a different way that Bootstrap hides scrollbars? I dug into the Bootstrap example I posted above and I can't find the css code that does -webkit-scrollbar or -ms-overflow-style or scrollbar-width

Steve O Over a year ago

So interestingly in the bootstrap example it's just achieved with a defined height on the outer div that hides the scrollbar! Took me a few mins to get there.

wataru Over a year ago

Hi I want to try this answer but how to add no-scrollbar::-webkit-scrollbar to plugins ::-webkit-scrollbar this line makes me confuse. Could you write a sample for adding -webkit-scrollbar to tailwind.config.js that would be very helpful to me.

Steve O Over a year ago

::-webkit-scrollbar is just a webkit specific selector used to target the scrollbar style in Chrome, Safari, Edge and Opera. The class that can be used here is .no-scrollbar. caniuse.com/?search=%3A%3A-webkit-scrollbar. As far as adding a utility in TailwindCss I'd use the approach here: play.tailwindcss.com/zQftpiBCmf

yaputra jordi Aug 18 at 12:04

Very helpful! Thanks. Especially the utility link there

Reza Ebrahimi · Accepted Answer · 2023-07-12 22:35:52Z

83

Add this to your global css file (global.css, style.css or whatever you have):

/*
    https://github.com/tailwindlabs/tailwindcss/discussions/2394
    https://github.com/tailwindlabs/tailwindcss/pull/5732
*/
@layer utilities {
    /* Chrome, Safari and Opera */
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }

    .no-scrollbar {
      -ms-overflow-style: none; /* IE and Edge */
      scrollbar-width: none; /* Firefox */
    }
}

Then you just add the class no-scrollbar as you would typically like so, notice I added overflow-y-auto to keep the scrollbar automatically the correct size too.

<div className="no-scrollbar overflow-y-auto">

ALTERNATIVELY:

You could try this tailwindcss plugin for hide scrollbar

https://github.com/reslear/tailwind-scrollbar-hide

edited Jul 12, 2023 at 22:35

Reza Ebrahimi

3,6892 gold badges30 silver badges42 bronze badges

answered Dec 8, 2021 at 23:17

jasonleonhard

14.2k1 gold badge98 silver badges71 bronze badges

2 Comments

laszlo Over a year ago

From this answer I cannot deduct in which file should I put this class definition

Bayu Over a year ago

I love to use this approach, with a note that if we use a prefix for our tailwind classes, this layer will not need a prefix. Please CMIIW :)

Michael McGreal · Accepted Answer · 2022-06-08 19:20:01Z

To answer @wataru's question in the comments, the syntax to add these classes as a plugin to tailwind.config.js is this:

const plugin = require('tailwindcss/plugin')

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx}",
    "./components/**/*.{js,ts,jsx}",
  ], 
  theme: {
    extend: {},
  },
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.scrollbar-hide': {
          /* IE and Edge */
          '-ms-overflow-style': 'none',

          /* Firefox */
          'scrollbar-width': 'none',

          /* Safari and Chrome */
          '&::-webkit-scrollbar': {
            display: 'none'
          }
        }
      }
      )
    })
  ],
}

The lines to inspect are the const plugin and the plugins: [] array

I learned this by inspecting the source code of the https://github.com/reslear/tailwind-scrollbar-hide package linked by @jasonleonhard above.

Thomas Cayne · Accepted Answer · 2024-01-09 13:57:58Z

19

Tailwind v3 has a powerful feature calledarbitrary values. You can find how to use it here, Using arbitrary values. Read slowly because you can miss it. I did the first time. There's no need to use utilities.

class="[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"

That takes care of the big 3 browsers:

/* Safari and Chrome */

/* IE and Edge */

/* Firefox */

edited Jan 9, 2024 at 13:57

answered Feb 18, 2023 at 18:48

Thomas Cayne

1,63012 silver badges18 bronze badges

2 Comments

avertocle Over a year ago

should be [scrollbar-width:none] i.e none should be without single quotes

rozsazoltan Mar 19 at 6:33

While it's not a bad suggestion, it’s somewhat developer-unfriendly to type this out for every use case. At that point, it's better to create a utility.

user20756121 · Accepted Answer · 2022-12-12 11:19:23Z

16

With tailwind v3 you are able to use arbitrary values to achieve this.

Use [&::-webkit-scrollbar]:hidden on your HTML element classList.

answered Dec 12, 2022 at 11:19

user20756121

1841 silver badge2 bronze badges

1 Comment

rozsazoltan Mar 19 at 6:33

While it's not a bad suggestion, it’s somewhat developer-unfriendly to type this out for every use case. At that point, it's better to create a utility.

ADTC · Accepted Answer · 2025-03-19 04:38:18Z

3

In Tailwind v4, you can create utility classes.

@utility no-scrollbar {
  scrollbar-width: none;
}

Then simply use it like a Tailwind class:

<ul class="flex overflow-x-auto whitespace-nowrap p-4 no-scrollbar">

Browser support is Baseline 2024. If you're targeting older browsers, add vendor prefixes:

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

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

Note: Nesting is Baseline 2023. If you want to go even older, use a plain CSS class instead and unnest the CSS above.

Tip: The npm packages are doing exactly this via Javascript, so we can drop the dependency and define it purely in CSS.

answered Mar 19 at 4:38

ADTC

10.4k7 gold badges80 silver badges102 bronze badges

2 Comments

rozsazoltan Mar 19 at 6:29

Previously, up until TailwindCSS v3, native CSS had to be created inside @layer utilities. With the introduction of the CSS-first configuration in v4, this has been updated and shortened using the @utility directive.

foreverAnIntern Apr 21 at 1:21

This worked mate! Thanks :)

DBencz · Accepted Answer · 2024-12-09 08:55:10Z

0

There is a handy npm package called tailwind-scrollbar to handle this, (and much more) that we use in our project:

https://www.npmjs.com/package/tailwind-scrollbar

After installing, you can use the scrollbar-none class for your use-case.

answered Dec 9, 2024 at 8:55

DBencz

1,3582 gold badges11 silver badges17 bronze badges

Comments

Syed Mesam · Accepted Answer · 2025-02-21 07:56:12Z

0

If you're using a Tailwind plugin, install it first:

npm install tailwind-scrollbar-hide

Then enable it in tailwind.config.js

module.exports = {
  plugins: [require("tailwind-scrollbar-hide")],
};

Use the scrollbar-hide class in your element

<div className="h-64 w-80 overflow-auto scrollbar-hide">
  <p>Content inside the scrollable div...</p>
</div>

answered Feb 21 at 7:56

Syed Mesam

12 bronze badges

1 Comment

Lã Ngọc Hải Feb 21 at 9:25

I think recommendation should be a comment, not an answer

Jacopo · Accepted Answer · 2025-03-21 09:15:37Z

0

Update:

Since Tailwind 4.0 you can simply add

scrollbar-hide

to your class

answered Mar 21 at 9:15

Jacopo

1631 gold badge2 silver badges10 bronze badges

3 Comments

ADTC Mar 23 at 13:58

There is no such built-in class in Tailwind v4 (though I wish there was!). You probably have a plugin added — maybe the one mentioned by Syed Mesam.

Jacopo Mar 27 at 11:52

You're right. I was just checking our local css and this is a in-house solution. You can although make it work if you add to your styles.css .scrollbar-hide::-webkit-scrollbar { display: none; } /* For IE, Edge and Firefox / .scrollbar-hide { -ms-overflow-style: none; / IE and Edge / scrollbar-width: 0; / Firefox */ }

ADTC Mar 27 at 12:11

I think that is practically the same as the utility class in my answer. Thank you for getting back to me though :)

Aditya Jha · Accepted Answer · 2025-07-01 09:03:59Z

0

<ul style = {{ scrollbarWidth : "none" }} >
</ul>

You could use something like this

answered Jul 1 at 9:03

Aditya Jha

1

Collectives™ on Stack Overflow

How to create scrollable element in Tailwind without a scrollbar

10 Answers 10

5 Comments

2 Comments

Comments

2 Comments

1 Comment

2 Comments

Comments

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

5 Comments

2 Comments

Comments

2 Comments

1 Comment

2 Comments

Comments

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related