How to Disable ScrollBar Customization of DaisyUI

[Keshav-writes-code]

So, i have a global.css file in my project where i defined some custom properties for the scrollbars

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

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

.scrollbar::-webkit-scrollbar-track {
border-radius: 100%;
background: #02050d;
}

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

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

so, when i installed DaisyUi, the scrollbar was all set to some other default Properties
i dont want that
i want mine properties to be applied

[flomero]

tailwind changes the scrollbar-color property of everything on your page. can you try adding this to remove the tailwind styles

*,
*:hover {
    scrollbar-color: auto;
}

If scrollbar-color and scrollbar-width are supported and have any value other than auto set, they will override ::-webkit-scrollbar-* styling. See Adding a fallback for scrollbar styles for more details.

see: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

[Keshav-writes-code]

Thanks

[vuhoanglam]

I'm facing this exact issue, and I can't believe something this simple has taken almost 2 hours and still can't be resolved. I want daisyUI to not interfere with my custom scrollbar styles. It has absolutely nothing to do with Tailwind CSS. When I remove the daisyUI plugin, everything works fine.

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

body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar {
width: 6px;
height: 6px;
}

::-webkit-scrollbar-track {
background: transparent;
}

::-webkit-scrollbar-thumb {
background: rgba(200, 200, 200, 0.8);
border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
background: rgba(180, 180, 180, 0.7);
}

[saadeghi]

::-webkit-scrollbar is not CSS standard and will be removed form webkit browsers in favor of the new, standard scrollbar-color so I wouldn't suggest using scrollbar-color instead of ::-webkit-scrollbar

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

But if you want to, you can disable daisyUI base style from config.

https://daisyui.com/docs/config/#base

https://github.com/saadeghi/daisyui/tree/master/src/base

[vuhoanglam]

you are the best, disable base style do the trick.

I don't know why, but when I manually set the width for webkit-scrollbar, the top and bottom arrows disappear and make it look much better, which is exactly what I want. If I use scrollbar-color and scrollbar-width, it immediately makes the arrows reappear at both ends of the scrollbar and the gutter will also have padding

::-webkit-scrollbar {
width: 6px;
height: 6px;
}

Image is zoomed 400%
You can check this link: https://playcode.io/2094263