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

user_14497708 0
Viewed 14090

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?

tailwind-css next.js reactjs css
6 Answers

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.

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

user_141082250

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

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');
    },
  ],
};
user_18700540

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;
}
...
user_180413520
Related