How to Change Style of Scrollbar using Tailwind CSS?

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.

Customizing Scrollbars Using CSS with Tailwind

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.

Basic Syntax for Scrollbar Styling

::-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.

Steps to Style of Scrollbar using Tailwind CSS

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

Step 4: Configure Tailwind to Watch Your Files

module.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.

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

// 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

Example 2: Further, if you want a scrollbar for the dark theme you can customize it as shown in global.css file

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

// 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

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.