rounded class does not display on chrome

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

[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