Replies: 6 comments 8 replies
-
|
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> |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
I just came across this pugin: https://github.com/adoxography/tailwind-scrollbar |
Beta Was this translation helpful? Give feedback.
-
|
Yep, seems to work fine in Chrome |
Beta Was this translation helpful? Give feedback.
-
|
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;
}
}
} |
Beta Was this translation helpful? Give feedback.
-
|
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;
}
} |
Beta Was this translation helpful? Give feedback.


Uh oh!
There was an error while loading. Please reload this page.
-
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?
Beta Was this translation helpful? Give feedback.
All reactions