[Feature Proposal]: Add custom scrollbar utilities

[ghost]

I just wanted to suggest unified scrollbar style classes. I noticed the docs use webkit CSS selectors for their scrollbars that appear in the class tables. I'm sure that could be extended to Firefox and other browsers as well. Is there a chance you could bundle these as utility classes?

[jenstornell]

I would also like to have such support built in. The CSS code looks something like below:

/* width */
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 100vh;
  background: #edf2f7;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 100vh;
  border: 3px solid #edf2f7;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

I guess it would be something like this:

<div class="scrollbar-thumb:bg-red-500 scrollbar-track:rounded">Content</div>

or a shorthand because it may be long...

<div class="s-thumb:bg-red-500 s-track:rounded">Content</div>

or...

<div class="sb-thumb:bg-red-500 sb-track:rounded">Content</div>

[thinyadanarsu1200]

@jenstornell Thank you~ it works but it doesn't work in firefox .How can I write?

[sidneyyau]

@jenstornell Thank you~ it works but it doesn't work in firefox .How can I write?

Just use the scrollbar-color property.

[luukdv]

I'd like this as well, but unfortunately there's still no way to add scrollbar styles to iOS Chrome and iOS Safari, rendering them invisible.

Adding these classes to Tailwind might give the wrong impression that they will work everywhere? Not sure.

[LaravelFreelancerNL]

I just came across this pugin: https://github.com/adoxography/tailwind-scrollbar

[withewolf-dev]

did you try the plugin?

[LaravelFreelancerNL]

Yep, seems to work fine in Chrome

[vielhuber]

Actually there is no need for a plugin.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .scrollbar {
        scrollbar-color: red white;
        scrollbar-width: thin;
        &::-webkit-scrollbar {
            width: 5px;
        }
        &::-webkit-scrollbar-track {
            background-color: white;
        }
        &::-webkit-scrollbar-thumb {
            background-color: red;
            border-radius: 5px;
        }
    }
}

[Wolfleader101]

How did you achieve this.

When i copied your code I got this

[vielhuber]

This works without any problems.
Just with npm scripts (node-sass followed by postcss for tailwind)

[krt-z]

You can also get it to work as written in the original post using the 'postcss-nested' plugin mentioned in the tailwind docs.

[davidrivadeneyra]

It even works with a normal configuration of your tailwindcss. Just add this code in your @layer utilities.

@layer utilities {

     /* Scroll thumb styles */
    .scrollbar::-webkit-scrollbar {
      width: .5rem;
    }
    .scrollbar::-webkit-scrollbar-thumb {
      background: #27272E; 
      border-radius: 1rem;
    }
    .scrollbar::-webkit-scrollbar-thumb:active {
      background-color: #131314;
    }
    .scrollbar::-webkit-scrollbar-thumb:hover {
      background: #3B3B46; 
      box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
    }

    /* Scroll track styles (Background) */
    .scrollbar::-webkit-scrollbar-track {
      background: #131314;
      border-radius: 4px;
    }
    .scrollbar::-webkit-scrollbar-track:hover, 
    .scrollbar::-webkit-scrollbar-track:active {
      background: #131314;
    }
}

[shaunsaker]

This is great thanks. I'd like to add an improvement if you'd like to also make use of tailwind classes, e.g:

@layer utilities {
  .scrollbar::-webkit-scrollbar {
    @apply w-4 h-4;
  }

[davidrivadeneyra]

Thank you!