v3 compatibility

[g0shed]

Hey there, is it possible to upgrade the package to be compatible with Tailwind v3?

[tntsoft]

Same problem here. This is a major hassle.

[SirRawlins]

I have very little knowledge of Tailwind plugins but does anyone know how much work it'd be to get tailwind-scrollbar compatible with TW3? I'd be happy to help out.

[tntsoft]

@SirRawlins I've given up and just wrote custom CSS for the scrollbars, since all of them are the same in all projects generally.

Here is a simple example of how to make all scrollbars grey with a border:

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

.scrollbar-track-rounded-full::-webkit-scrollbar-track{
    border-radius: 10px;
}
.scrollbar-thumb-rounded-full::-webkit-scrollbar-track{
    border-radius: 10px;
}
.scrollbar-thumb-blue-50::-webkit-scrollbar-track {
    background: #C4C4C4;
}
.scrollbar-track-gray-50::-webkit-scrollbar-thumb {
    background: #6638B6;
}

I understand you might need this plugin fixed, but meanwhile I hope this helps you as much as it helped me!

[vikdiesel]

Did the same. Just rewritten with css for my Tailwind Dashboard project. Respects :hover and dark mode with .dark class

Demo: https://justboil.github.io/admin-one-vue-tailwind/

html {
  scrollbar-width: thin;
}

html::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html::-webkit-scrollbar-thumb, #aside::-webkit-scrollbar-thumb {
  @apply rounded;
}

html {
  @apply overflow-auto;
  scrollbar-color: #9ca3af #e5e7eb;
}

html::-webkit-scrollbar-track {
  @apply bg-gray-200;
}

html::-webkit-scrollbar-thumb {
  @apply bg-gray-400;
}

html::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500;
}

html.dark {
  scrollbar-color: #374151 #111827;
}

html.dark::-webkit-scrollbar-track {
  @apply bg-gray-900;
}

html.dark::-webkit-scrollbar-thumb {
  @apply bg-gray-700;
}

html.dark::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-600;
}

[parafeu]

Hey ! I made a little plugin for tailwindcss 3 to do pretty much the same thing as this plugin. https://gist.github.com/parafeu/3cf1c52d374a52091a685ce030563411

Feel free to give me suggestions to improve it

[webmastervinay]

Hello Author, Have you planned to release any update?

[adoxography]

v2 will be Tailwind 3 compatible!

[adoxography]

v2 is now released with Tailwind 3 compatibility.