How to Change Style of Scrollbar using Tailwind CSS?
Last Updated :
26 Apr, 2025
By default, Tailwind CSS does not include built-in utilities for styling scrollbars. However, you can customize the appearance of scrollbars using traditional CSS in combination with Tailwind's utility classes. This is achieved by using the scrollbar-* classes to customize aspects like scrollbar width, color, and behavior.
To style the scrollbar, you'll use WebKit-based pseudo-elements like ::-webkit-scrollbar, which are supported by browsers such as Chrome and Safari. These pseudo-elements allow you to control various parts of the scrollbar, such as its track and thumb.
::-webkit-scrollbar {
/* Customize the scrollbar width */
}
::-webkit-scrollbar-track {
/* Customize the scrollbar track */
}
::-webkit-scrollbar-thumb {
/* Customize the scrollbar thumb */
}
- ::-webkit-scrollbar: Targets the entire scrollbar, allowing you to set its width/height.
- ::-webkit-scrollbar-track: Styles the track (background) where the thumb moves.
- ::-webkit-scrollbar-thumb: Styles the thumb (draggable part) of the scrollbar.
Note: It works for WebKit browsers like Chrome, Safari, etc.
Let's walk through the process of setting up a Next.js project with Tailwind CSS, and applying custom scrollbar styles.
Step 1: Create a new Next Project
You can create a new Next application using the command below.
npx create-next-app scrollbar
Step 2: Install Tailwind
Once your next project is created, open the project’s root directory and install the tailwind dependencies with the following command.
npm install -D tailwindcss postcss autoprefixer
Step 3: Create Tailwind config file
Run the following command to create a tailwind config file, this file can be used to extend the tailwind’s functionality.
npx tailwindcss init -p
Project Structure
Next.js Project Structuremodule.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
Step 5: Add Tailwind directives
In your /styles/global.css file, add the layer directives of tailwind CSS.
@tailwind base;
@tailwind components;
@tailwind utilities;
Example 1: In this example, we'll add the scrollbar styles to our global CSS file.
CSS
/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
JavaScript
// pages/index.js
export default function Home() {
return (
<div className="min-h-[200vw]">
<img className="fixed top-1/2 left-1/4 w-96"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo-new-2.svg"
alt="" />
</div>
)
}
Steps to Run: Use this command in the project directory to run the application
npm run dev
Output
Change the scrollbar when using Tailwind (next.js/react)Example 2: Further, if you want a scrollbar for the dark theme you can customize it as shown in global.css file
CSS
/* global.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #888;
border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #000;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
JavaScript
// pages.index.js
export default function Home() {
return (
<div className="min-h-[200vw]">
<img className="fixed top-1/2 left-1/4 w-96"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo-new-2.svg"
alt="" />
</div>
)
}
Output
How to change scrollbar when using Tailwind (next.js/react)Conclusion
While Tailwind CSS does not have built-in utilities for customizing scrollbars, you can easily achieve this by using WebKit-based pseudo-elements like ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb. By integrating these custom CSS styles with Tailwind, you can create a fully responsive and visually appealing scrollbar that fits your project’s design.