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
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.w3wiki.net/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:
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.w3wiki.net/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: