Change Browser Scrollbar Colour with Tailwind CSS
Styling a scrollbar with Tailwind CSS for Chrome, Edge, Safari and Firefox. This is possible with vendor prefixes and pseudo-elements.
I touched on the configuration for this in the Change Text Highlight Color with Tailwind CSS post I did recently.
So, I’ll go over how to do this in Tailwind CSS then I can go over it with a vanilla CSS example too.
Tailwind example
In the main (global) CSS file for Tailwind, usually generated for you
when using a config tool but typically named app.css
or
tailwind.css
. The file that has the Tailwind @tailwind
directives
in it, it should look something like this:
@tailwind base;
@tailwind components;
@tailwind utilities;
This file is where you’d add in any global styles, in this case for
the scrollbars you’d need to add it between @tailwind base;
and
@tailwind components;
for Firefox add in the CSS for CSS
Scrollbars:
@tailwind base;
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: var(--secondary) var(--primary);
}
@tailwind components;
@tailwind utilities;
That example uses CSS variables for the --secondary
and --primary
colours of the scrollbar. These would typically be defined in a
:root
element, something like this:
:root {
--primary: rebeccapurple;
--secondary: cornflowerblue;
}
For Chrome, Edge, and Safari, use the vendor prefix pseudo-elements:
@tailwind base;
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: var(--secondary) var(--primary);
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 15px;
}
*::-webkit-scrollbar-track {
background: var(--primary);
border-radius: 5px;
}
*::-webkit-scrollbar-thumb {
background-color: var(--secondary);
border-radius: 14px;
border: 3px solid var(--primary);
}
@tailwind components;
@tailwind utilities;
Only the colours are added to variables here but you could also use
them for the width
and border-radius
. Go nuts! 😊
Vanilla CSS example
Ok, so here’s a vanilla CSS example in a CodePen you can check out:
As a bonus you don’t have to have the background-color
as a solid
colour, you could have a stripey scrollbar:
background: repeating-linear-gradient(
45deg,
var(--secondary),
var(--secondary) 5px,
var(--primary) 5px,
var(--primary) 10px
);
Or you could even use an image!
Conclusion
So there you have it, really simple way to style a scrollbar with CSS!
If you want to Change Text Highlight Color with Tailwind CSS you can check out that post too.
There’s also a post on Gradient animations with Tailwind CSS and SvelteKit you might find interesting.
There's a reactions leaderboard you can check out too.
Analytics Information