I'm working on a Next.js project and am trying to style a list's scrollbar using Tailwind CSS. However, the scrollbar is still being displayed with its default style. Here's what I've done

Installed tailwind-scrollbar using

`npm install --save-dev tailwind-scrollbar`

Updated the Tailwind plugins:

```
plugins: [
    // ...
    require('tailwind-scrollbar'),
],

```

My code (Please find the scrollbar styling in the ul className):

```
function MessageTable({myMessages}) {
    return(
        <ul id="messageTable" className="relative left-[10vw] w-[60vw] h-[70vh] border-1 text-white bg-black overflow-y-scroll scrollbar-thumb-blue-600 scrollbar-thumb-rounded hover:scrollbar-thumb-red-500">
            {myMessages.map((item) => (
                <li key={item} className="table float-right clear-right max-w-[40vw] bg-blue-500 p-1 border-2 border-black rounded-2xl border-spacing-2">{item}</li>
            ))}
        </ul>           
    );
}

```

Do you know what I'm missing?

Thanks for your help!