How to Change Style of Scrollbar using Tailwind CSS ?

Tailwind does not provide any built-in utilities for styling scrollbars, but you can customize the scrollbar appearance using CSS. To change the scrollbar’s appearance using Tailwind, we need to use the scrollbar-* classes. These classes are used to customize various aspects of the scrollbar, such as its width, color, and behavior.

Syntax

::-webkit-scrollbar {
    /* Customize the scrollbar width */
}

::-webkit-scrollbar-track {
    /* Customize the scrollbar track */
}

::-webkit-scrollbar-thumb {
    /* Customize the scrollbar thumb */
}

Note: It works for WebKit browsers like Chrome, Safari, etc.

Approach

To set the custom styles for the scrollbar on a web page we will use the scrollbar class using webkit selectors. we will define CSS properties like color, background, hover, width, etc to change the appearance of the scrollbar.

Installation steps

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

Project Structure

Step 4: We need to configure file paths, for tailwind to work. So, in your tailwind.config.js file, add the following configuration.

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.

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>
    )
}

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

Steps to Run: Use this command in the project directory to run the application

npm run dev 

Output:

How to 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

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>
    )
}

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

Steps to Run: Use this command in the project directory to run the application

npm run dev 

Output:

How to change scrollbar when using Tailwind (next.js/react)