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

Question

I'm using Tailwind (react/next) and struggle to change the way my scrollbar looks.

It's a single page application and I have been trying to create custom CSS to apply to the first div in my index file, like this:

<div className="no-scroll"> <<<<<<<--------- Adding custom css here
      <Head>
        <title>Oscar Ekstrand</title>
        <link rel="icon" href="/images/favicon.ico" />
    
      </Head>
      
      <main className="flex flex-col no-scroll">
        <section ref={heroref}>
          <Hero scrollToContacts={scrollToContacts} />
        </section>

        <section ref={offeringref}>
          <Offering />
        </section>
        <section ref={processref}>
          <WhatIDo />
        </section>

        <section ref={biographyref}>
          <CvBar />
        </section>
        <section ref={skillsetref}>
          <Skillset />
        </section>
      </main>
      <section ref={contactsref}>
        <Footer />
      </section>
    </div>

I can get custom CSS classes to work for things like buttons, both with a "plugin-approach" and having a global style sheet. (https://play.tailwindcss.com/zQftpiBCmf)

But I can't understand how to change the look of my scrollbar.

Anyone got an idea?

wongx · Accepted Answer · 2023-02-05 16:56:14Z

76

Tailwind CSS doesn't provide a built-in way to customise the scrollbar styling. However, you can use the various ::-webkit-scrollbar pseudo-elements to style it.

Tailwind playground link: https://play.tailwindcss.com/5samiwyr4v.

@layer utilities {
  .scrollbar::-webkit-scrollbar {
    width: 20px;
    height: 20px;
  }

  .scrollbar::-webkit-scrollbar-track {
    border-radius: 100vh;
    background: #f7f4ed;
  }

  .scrollbar::-webkit-scrollbar-thumb {
    background: #e0cbcb;
    border-radius: 100vh;
    border: 3px solid #f6f7ed;
  }

  .scrollbar::-webkit-scrollbar-thumb:hover {
    background: #c0a0b9;
  }
}

edited Feb 5, 2023 at 16:56

wongx

12.7k11 gold badges45 silver badges78 bronze badges

answered Oct 1, 2021 at 17:53

juliomalves

50.7k23 gold badges178 silver badges169 bronze badges

2

Thanks!! I was very determined to remove the default scrollbar for the whole page, if that makes any sense. Also that part about overflow-y-scroll from Tailwind was missing from my own trial and errors!
– Oscar Ekstrand
Commented Oct 2, 2021 at 6:14
1

I didn't have any success with this approach and instead got the following to work (not inside @layer) *::-webkit-scrollbar { width: 20px; } ...and so on.
– Aaron
Commented Dec 7, 2023 at 0:22
Have an updated answer 2024
– thednp
Commented Dec 30, 2023 at 7:12
Is there any way to replace the default scrollbar for the entire layout? When I try to add the scrollbar to my root layout, it just adds a second scrollbar (which also doesn't work properly).
– smaica
Commented Oct 2, 2024 at 17:12

Add a comment |

Joshua Galit · Accepted Answer · 2021-12-15 03:11:42Z

yarn add -D tailwind-scrollbar

or

npm install --save-dev tailwind-scrollbar

then

plugins: [
    // ...
    require('tailwind-scrollbar'),
],

sample

<div class="h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100">
    <div class="h-64"></div>
</div>

variants

variants: {
    // ...
    scrollbar: ['dark']
}

FOR SOME INSTANCE IF YOU WANT TO CHANGE THE WIDTH OF THE SCROLLBAR YOU CAN CUSTOME IN YOUR tailwind.css

@layer utilities {
  .scrollbar-medium::-webkit-scrollbar {
    width: 12px;
  }
}

then

<div class="h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100 scrollbar-medium">
    <div class="h-64"></div>
</div>

THERE IS ONLY ONE STYLE FOR SCROLLBAR WHICH IS scrollbar-thin... so customize this way

Eugen Govorun · Accepted Answer · 2022-07-07 15:48:22Z

I've managed to style the scrollbar with Tailwin plugin like this:

// tailwind.config.js

const plugin = require('tailwindcss/plugin');

module.exports = {
// ...
  plugins: [
    plugin(({ addBase, theme }) => {
        addBase({
            '.scrollbar': {
                overflowY: 'auto',
                scrollbarColor: `${theme('colors.blue.600')} ${theme('colors.blue.200')}`,
                scrollbarWidth: 'thin',
            },
            '.scrollbar::-webkit-scrollbar': {
                height: '2px',
                width: '2px',
            },
            '.scrollbar::-webkit-scrollbar-thumb': {
                backgroundColor: theme('colors.blue.600'),
            },
            '.scrollbar::-webkit-scrollbar-track-piece': {
                backgroundColor: theme('colors.blue.200'),
            },
        });
    }),
],
// ...
};

And use like this:

<div class="scrollbar">
    <!-- content -->
</div>

wener · Accepted Answer · 2022-08-31 13:42:35Z

TailwindCSS's doc changed scrollbar styles by scrollbar:!w-1.5 scrollbar:!h-1.5 scrollbar:bg-transparent scrollbar-track:!bg-slate-100 scrollbar-thumb:!rounded scrollbar-thumb:!bg-slate-300 scrollbar-track:!rounded, the plugin they use

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: 'jit',
  content: ['./src/**/*.{html,ts,tsx,js}'],
  darkMode: 'media',
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [
    // https://github.com/tailwindlabs/tailwindcss.com/blob/ceb07ba4d7694ef48e108e66598a20ae31cced19/tailwind.config.js#L280-L284
    function ({ addVariant }) {
      addVariant(
        'supports-backdrop-blur',
        '@supports (backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0))',
      );
      addVariant('supports-scrollbars', '@supports selector(::-webkit-scrollbar)');
      addVariant('children', '& > *');
      addVariant('scrollbar', '&::-webkit-scrollbar');
      addVariant('scrollbar-track', '&::-webkit-scrollbar-track');
      addVariant('scrollbar-thumb', '&::-webkit-scrollbar-thumb');
    },
  ],
};

Sagar Roy · Accepted Answer · 2021-10-03 16:51:11Z

6

/* For Firefox Browser */
.scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #000 #fff;
}


/* For Chrome, EDGE, Opera, Others */
.scrollbar::-webkit-scrollbar {
  width: 20px;
}

.scrollbar::-webkit-scrollbar-track { 
  background: #fff;
}

.scrollbar::-webkit-scrollbar-thumb { 
  background:#000;
}

answered Oct 3, 2021 at 16:51

Sagar Roy

4242 silver badges8 bronze badges

Add a comment |

Alamakanambra · Accepted Answer · 2023-07-18 18:01:11Z

5

For anyone who doesn't want to use plugins and pollute css or config, here is an option with arbitrary variant:

<div class="[&::-webkit-scrollbar]:[width:30px]
            [&::-webkit-scrollbar-thumb]:bg-red-500
            overflow-scroll">
</div>

https://tailwindcss.com/docs/hover-focus-and-other-states#using-arbitrary-variants

answered Jul 18, 2023 at 18:01

Alamakanambra

7,9515 gold badges46 silver badges60 bronze badges

I tried to apply this in all elements, one by one, and nothing happened. Do we need something else for it to work?
– marcelocra
Commented Dec 5, 2024 at 3:37

Add a comment |

Natumanya Guy · Accepted Answer · 2022-11-13 05:39:22Z

3

Extend Tailwind by adding your own base styles on top of Preflight, simply add them to your CSS within a @layer base directive:

//Inside styles.css

@tailwind base; 
@tailwind components;
@tailwind utilities;

@layer base {
::-webkit-scrollbar-thumb{
@apply bg-transparent shadow-sm
}
::-webkit-scrollbar{
@apply w-3 bg-transparent
}
::-webkit-scrollbar-thumb{
@apply rounded-none bg-blue-400 /*color trackbar*/
}

}

Check out the documentation [here][1] [1]: https://tailwindcss.com/docs/preflight

edited Nov 13, 2022 at 5:39

answered Nov 13, 2022 at 5:38

Natumanya Guy

3071 silver badge6 bronze badges

works for Chrome only. Does work on firefox.
– Tarique Anowar
Commented Apr 30, 2023 at 21:15

Add a comment |

Emre · Accepted Answer · 2022-09-20 17:09:15Z

1

Addition to that comment : https://stackoverflow.com/a/69410151/18041352

You can add darktheme option just adding dark:scrollbarkdark or what you want to name that.

<div className="... overflow-auto scrollbar dark:scrollbarkdark> ...

Then add this in your main css file like in that comment above.

.scrollbar::-webkit-scrollbar-track {
    background: white;
}
.scrollbardark::-webkit-scrollbar-track {
    background: black;
}
...

answered Sep 20, 2022 at 17:09

Emre

213 bronze badges

Add a comment |

Christopher Poulsen · Accepted Answer · 2023-06-29 19:24:03Z

I managed to do it using a combination of css and tailwind in my globals.css file. You can achieve this by using @layer at the base level so it applies to the hole website, and @apply where we can declare the style using tailwind classes. In this case I'm

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* width */
  ::-webkit-scrollbar {
    @apply w-2
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    @apply bg-inherit
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    @apply bg-pink-200 dark:bg-violet-600 rounded-xl
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-violet-700
  }
}

Abdulmajeed · Accepted Answer · 2024-07-06 22:52:42Z

in tailwind.config.js add this.

const plugin = require('tailwindcss/plugin');

/** @type {import('tailwindcss').Config} */
export default {
    content: [],

    theme: {},

    plugins: [
        plugin(function ({ addUtilities }) {
            addUtilities({
                '.scrollbar-width-auto': {
                    'scrollbar-width': 'auto',
                },

                '.scrollbar-none': {
                    'scrollbar-width': 'none',
                    '&::-webkit-scrollbar': {
                        'display': 'none'
                    }
                },

                '.scrollbar-thin': {
                    'scrollbar-width': 'thin',
                },

                '.scrollbar-light': {
                    '&::-webkit-scrollbar': {
                        width: '5px',
                        height: '8px',
                        background: '#374151',
                        border: '4px solid transparent',
                        borderRadius: '8px',
                    },
                    '&::-webkit-scrollbar-thumb': {
                        background: '#4f46e5',
                        border: '4px solid transparent',
                        borderRadius: '8px',
                        backgroundClip: 'paddingBox',
                    },
                    '&::-webkit-scrollbar-thumb:hover': {
                        background: '#6366f1',
                    },
                }
            })
        }),
        forms, typography],
};

thin add class

<div className"... scrollbar-light">

Mark Dionnie · Accepted Answer · 2024-11-12 00:34:18Z

Don't forget the accessiblity!!! Here's a custom scrollbar that is subtle and works well with both light and dark themes, we can use neutral grays from the Tailwind CSS palette.

src\app\globals.css

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }

  ul,
  ol {
    list-style: revert;
  }
  /* NEW CODE */
  /* width */
  ::-webkit-scrollbar {
    @apply w-2;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    @apply bg-gray-200 dark:bg-gray-700;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    @apply bg-gray-400 dark:bg-gray-500 rounded-xl;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500 dark:bg-gray-400;
  }
}

Alessio · Accepted Answer · 2024-12-19 09:20:10Z

I achieved this in angular by adding

Steps:

a. Install tailwind-scrollbar by this command.

npm install tailwind-scrollbar

b. Inside the file tailwind.config.js import tailwind-scrollbar inside plugins

plugins: [
    // Tailwind plugins
    require('tailwind-scrollbar'),
]

c. In your global style (style.scss/css) add the utilities/components of tailwind.

@tailwind base; 
@tailwind components;
@tailwind utilities;

@layer base {
::-webkit-scrollbar{
@apply w-1 bg-transparent;
@apply h-1 bg-transparent;
}
::-webkit-scrollbar-thumb{
@apply rounded-full bg-gray-400
}}

For more reference or documentation you can visit https://tailwindcss.com/docs/preflight

Max Lumnar · Accepted Answer · 2025-03-02 16:34:09Z

I am using tailwindcss v.4 and i need both normal and dark mode.. i tried the solutions here and it didn't worked out for me, but eventually i found this solution, maybe it helps others:

add this to your input.css (or whatever you called it)

@layer components {
  /* Base styling for a custom scrollbar */
  .scrollbar-custom {
    /* For Firefox */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #edf2f7; /* thumb and track (light mode) */
  }
  /* For WebKit browsers */
  .scrollbar-custom::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .scrollbar-custom::-webkit-scrollbar-track {
    background: #edf2f7;
  }
  .scrollbar-custom::-webkit-scrollbar-thumb {
    background-color: #cbd5e0;
    border-radius: 10px;
    border: 2px solid #edf2f7;
  }

  /* Dark mode styles */
  .dark .scrollbar-custom {
    scrollbar-color: #718096 #2d3748; /* thumb and track (dark mode) */
  }
  .dark .scrollbar-custom::-webkit-scrollbar-track {
    background: #2d3748;
  }
  .dark .scrollbar-custom::-webkit-scrollbar-thumb {
    background-color: #718096;
    border: 2px solid #2d3748;
  }
}

Then you can add scrollbar-custom to your elements, and it supports both modes just fine

Why not use @variant?
– rozsazoltan
Commented Mar 2 at 18:46 — rozsazoltan, Commented Mar 2 at 18:46

Collectives™ on Stack Overflow

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

13 Answers 13

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

Linked

Related