.bg-clip-text is missing the box-decoration-break: clone property

[MarkPraschan]

Multiline text gradients are breaking on certain browsers (like Safari iOS) because .bg-clip-text currently lacks a box-decoration-break property. Any line beyond the first is black or transparent in these cases.

This problem is easily resolved by adding the following rule to my tailwind.css document, but I believe it should be integrated into the core:

.bg-clip-text {
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

More info on this issue: https://zellwk.com/blog/multi-line-gradient-links/

[adamwathan]

Oh wow this is helpful, thanks! I think we should add dedicated box-decoration-break utilities honestly since it's useful outside of this situation too. Maybe box-slice and box-clone?

[MarkPraschan]

Perhaps. I've never used the property until today, but wanted to share in case others run into it.