✨ Feature request: Gradients

[buhodev]

Hi, thanks for your work on this plugin! I wonder if it's possible to have this utility scrollbar-thumb-gradient-* in order to add gradients to the scrollbar thumb:

<div class="h-32 overflow-y-scroll from-red-500 to-blue-500 scrollbar scrollbar-thumb-gradient-to-br scrollbar-track-slate-300 scrollbar-track-rounded-full scrollbar-thumb-rounded-full">
  <div class="h-64 bg-slate-400"></div>
</div>

The snippet for it to work in vanilla css would be something like:

*::-webkit-scrollbar-thumb {
  --tw-gradient-from: #ef4444 var(--tw-gradient-from-position);
  --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

[adoxography]

This is a cool idea, but I'm worried about the complexity. Case in point: in the example, you've got from-red-500 and to-blue-500. That means that, as written, those utilities would be shared by scrollbar-thumb-gradient-* and Tailwind's own bg-gradient-*, so you'd realistically only be able to use one or the other on any given element (since having the same gradient on both the background and the scrollbar is almost definitely not what you want). Similarly, I'd expect a call for scrollbar-track-gradient-* to come up, which would have the same types of conflicts. You'd end up needing separate sets of *-from-* and *-to-* (and *-via-*, for that matter) for each new pseudoelement that could have a gradient.

I'm not especially motivated to tackle this one because, in addition to the complexity concerns, this would be a strictly nocompatible mode feature, since it doesn't apply to Firefox and wouldn't even apply to Chrome if the user had #enable-experimental-web-platform-features enabled. And unlike the existing nocompatible mode features, this one wouldn't even have a corollary across browsers.

[buhodev]

Thanks for your response, I understand the drawbacks and ended up using custom CSS (not everything has to be done in tailwind).