Changing Scrollbar Color Tailwind

Most sites just use the browsers standard scrollbar but sometimes adding your own custom scrollbar can make your website feel much more custom and give a much better user experience. This tutorial is a quick tutorial on how to add a custom scrollbar to your Tailwind styled project that should cover most popular browsers used today.

Luckily it is quite easy to alter the scrollbar size and color. In Tailwind's global css file, typically ..\static_src\src\styles.css will be where you want to add the alterations. The initial file contains 3 lines, base, components, and utilities for tailwind, between @tailwind base; and @tailwind components; is where you want to add the code. 

@tailwind base;

/* Code Here */

@tailwind components;
@tailwind utilities;

First thing to do is predefine some colors with the following code. This makes it much easier to reuse the same color multiple times rather than needing to reuse the hex color. I just placed this code in the same styles.css file.

:root {
	--primary: #94a3b8;
	--secondary: #f9fafb;
}

If you use a dark/light theme button (I have a blog on setting up dark theme), then you can add the following to make sure that the color of the scrollbar changes accordingly.

.dark {
	--primary: #0f172a;
  --secondary: #334155;
}

Finally, you want to add the alterations for the main browsers.

/* 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: 0px;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--secondary);
  border-radius: 0px;
  border: 3px solid var(--primary);
}

That's it! Luckily with Tailwind it is super easy to customize your scroll wheel with just a few lines of code. 

Leave a comment:

Comments: