CODEWITHSUNDEEP
cssreactjsnext.jstailwind-css
Oscar Ekstrand
Oscar Ekstrand

Reputation: 829

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

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?

Upvotes: 44

Views: 82160

Answers (12)

Bhavesh Jha
Bhavesh Jha

Reputation: 31

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

Upvotes: 0

Mark Dionnie
Mark Dionnie

Reputation: 435

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

Upvotes: 0

Abdulmajeed
Abdulmajeed

Reputation: 580

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

Upvotes: 0

Alamakanambra
Alamakanambra

Reputation: 7881

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

Upvotes: 5

Christopher Poulsen
Christopher Poulsen

Reputation: 510

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

Upvotes: 1

juliomalves
juliomalves

Reputation: 50348

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

Upvotes: 73

Natumanya Guy
Natumanya Guy

Reputation: 307

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

Upvotes: 3

Emre
Emre

Reputation: 21

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

Upvotes: 1

wener
wener

Reputation: 7760

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

Upvotes: 7

Eugen Govorun
Eugen Govorun

Reputation: 3326

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>

Upvotes: 8

Joshua Galit
Joshua Galit

Reputation: 1466

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

Upvotes: 28

Sagar Roy
Sagar Roy

Reputation: 424

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

Upvotes: 6

Related Questions