Scrollbar styling support

[mathurinfarms]

This is not an issue - more of a recommendation

By default, TailwindCSS doesn't allow for custom scrollbars / styling.

There's currently a plugin on npm called tailwind-scrollbar

Even Tailwind's website uses custom scrollbars in the documentation - it would be great to add scrollbar styling natively instead of having to use plugins or adding custom CSS:

[agroot2002]

I don't want to use plugin for this , can you tell me how I can add scrollbar property to my tailwind project . More specifically I want to hide my scrollbar but I am unable to find a solution .

[agroot2002]

Hey I got the answer , I reverse engineered the code of the repo you provided . So the solution I applied is , I created a plugin in tailwind.config.js like this :

  const plugin = require('tailwindcss/plugin')
  
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.scrollbar-none': {
          '&::-webkit-scrollbar': {
            'display': 'none'
          }
        }
      })
    })
  ],
  

now as we add the class 'scrollbar-none' to the component after creating the plugin . We can see the results !

[mathurinfarms]

Ah that's a good idea actually. We could also style the scrollbar this way. Thanks!

[lukewarlow]

This should have a scrollbar-width: none for Firefox support.

'.scrollbar-none': {
        'scrollbar-width': 'none',
        '&::-webkit-scrollbar': {
          display: 'none',
        },
}

[lukewarlow]

See https://github.com/lukewarlow/tailwind-scrollbar-utilities for an alternative plugin that's focussed on the standard CSS properties scrollbar-color and scrollbar-width. (With a fallback to ensure hiding scrollbars works in all browsers)

These properties are supported inside Firefox and Chrome (from 121).

[xegulon]

What about having tailwind classes for scrollbar color, scrollbar bg color and width?

@adamwathan would you accept a PR in this direction?

[lukewarlow]

I already put together a PR for scrollbar-width and scrollbar-gutter and they were rejected at the time fwiw.

[xegulon]

@adamwathan does tailwind not intend to support this specific feature? if yes, why so?

[mathurinfarms]

@adamwathan It would be great to see such a feature indeed. That's the whole reason I suggested this about a year ago

[merobal]

@adamwathan ping on this. It became official even in Chrome: https://developer.chrome.com/docs/css-ui/scrollbar-styling

[MrOxMasTer]

The discussion has been going on for 2 years, 150k people download the plugin, but they still haven't added it. Sadly