rounded class does not display on chrome

[geniusit]

Hi,

I try to use the scrollbar-thumb-rounded-full class with my React Next application.

However it doesn't render rounded on chrome as expected. As you can see :

Here is my code :

<div className="relative z-10 w-64 bg-white h-full overflow-y-auto scrollbar-thin scrollbar-thumb-gray-500 scrollbar-thumb-rounded-full">
            <Menu>
              <div className="flex flex-col">
                <div className="flex px-8 ">
                  <Menu.Button className="pl-2 my-2 w-10 rounded-full active:bg-gray-200 focus:outline-none">
                    <div onClick={() => setIsOpen(false)}>
                      <Hamburger />
                    </div>
                  </Menu.Button>
                  <Menu.Button className="px-8 focus:outline-none">
                    <Logo />
                  </Menu.Button>
                </div>
                <div className=" py-4 font-normal text-gray-500 flex-1">
                  <Menu.Items className="pl-2 pr-4 divide-y focus:outline-none" static>
                    {props.items.map(item => {

                      return (
                        <div key={item.title}>
                          <div className="pt-4 px-6 text-xs text-gray-400 uppercase">{item.title}</div>
                          <Menu.Item>
                            <MyLink href={item.href} className="rounded font-medium inline-flex items-center px-6 py-4 transition duration-200 w-full hover:bg-gray-200" onClick={() => setIsOpen(false)}>
                            {React.createElement(item.icon, {
                              /** A Technique to style current page item */
                              className: `scale-150 ${router.pathname === item.href ? "text-gray-500" : "text-gray-500"}`,
                            })}
                              <span className="px-4">{item.text}</span>
                            </MyLink>
                          </Menu.Item>
                        </div>
                      )
                    }
                    )}
                  </Menu.Items>
                </div>
              </div>
            </Menu>
          </div>

Why I don't see the rounded effect ?

Thank you

[DeoThemes]

Same here, added scrollbar: ["dark", "rounded"] in my config, but can't get rounded classes.

[danieltejano]

same result

[Sp33ktrE]

Same, can't get it to work on Opera.

[imclint21]

any news @adoxography ?

[lgd8981289]

I also encountered the same problem. The query found that tailwind-scrollbar does not currently support the v3 version, but the following code can be used as a temporary solution

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #d9d9d9;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #a0a0a0;
  border-radius: 10px;
}

link： https://github.com/adoxography/tailwind-scrollbar/issues/33#issuecomment-995905844

[coffee377]

The reason for the problem is that the 3.0+ API has changed. @adoxography

v2.x

v3.x

If you need it urgently. You can modify like below.

[leonnicklas]

As a workaround:

Install this PR (by @JCayabyab) via npm until it get's merged officially...

npm install adoxography/tailwind-scrollbar#pull/36/head

[shishirraven]

work around by leonnicklas works great! thanks

[adoxography]

Fix is merged into 1.3.2, but, while revisiting it, it seems to me like rounded never should have been a "variant" in the first place since it's not (e.g.) rounded:scrollbar-thumb. Future releases will have an opt-in nocompatible flag to unlock this class, since my main hesitation with including it at all was its lack of a Firefox equivalent.