You’ve got some text with a beautiful gradient, it looks fantastic! Then you open your gorgeous new website in Safari, and half your text is missing. This is particularly from using background-clip to create your gradients (as you would with Tailwind), and if the text goes multi-line, Safari will cut the second line off erratically. Here’s the bug report filed for WebKit a few years ago, which still hasn’t been addressed.

-webkit-box-decoration-break: clone;

Yep, that’s all. That should fix the problem completely on Safari! If you want an example, this was once in use on this very website in the pageHeader.njk component (back in the pre-Perseus days), which you can see here!

In case this solution didn’t work for you, there’s a StackOverflow thread here with a few other options that hopefully will!