background: need support custom bg-graident-[xxx]

[Simon-He95]

maybe could reference unocss : https://unocss.dev/play/#html=DwEwlgbgBAxgNgQwM5ILwCIAuAnBMDWYAdgOYC0A2mQAwB0A7AKwAOAHgLpQBG5Ju4AUyKYycYgITZuvfmCEiKATmogBJADQBiRgGYAbIoAcigPoBGM7QBMVgKRarOq4asAxE0dqHDtzjzLwYMxkmAKsmOgAfMAA9OAQkUA&config=JYWwDg9gTgLgBAbwFBzgEwKYDNgDsMDCEuOA5gDQpxhQYDOGMAgjDFMAEYCuMwWAnpVQ16jAJIBjYnSHVaDGAHU8aAMyUAvnCxQIIOAHIuuCBLp0DSJBgAekWOmwBDLgBt4mHPiIlgpABTIqFBu9ABccADaVKiRBhJcdDB6ALQhrhgG5IhwUq7QEQa0aAZwGgC6spVUdAAW0DAJMHQRQaiGCUmpdQ1NBoUwtjAprqRwgzbD0E64pBhw9QBuGFBhE8ODTq5ZVBqyIgotUTFyokoqqv4AlLLC8owsbJw8fPzXt6cKktKBJ6h0Ei2GAiAEYAHQAJg%2BqAkaFwhVqrDALQA9Cj6CAwXUUTt2mUblRqhorkggA&css=PQKgBA6gTglgLgUzAYwK4Gc4HsC2YDCAyoWABYJQIA0YAhgHYAmYcUD6AZllDhWOqgAOg7nAB0YAGLcwCAB60cggDYIAXGBDAAUKDBi0mXGADe2sGC704AWgDuCGAHNScDQFYADJ4Dc5sAACtMLKAJ5gggCMLPK2ABR2pPBIcsoAlH4WAEa0yADWTlBYqEw2yFjK3Bpw5LxxAOTllVDoYpSMYgAs3vUZ2gC%2BmsBAA&options=N4XyA

[rozsazoltan]

Use bg-linear-* instead of bg-gradient-*., you can also provide a custom value like this:

• https://tailwindcss.com/docs/background-image#using-a-custom-value

bg-linear-[90deg,#086afd_11.22%,#17cf3f_98.88%]

Instead of using bg-linear-[90deg,#536989_11.22%,#23282F_98.88%], you can use Tailwind's from-*, to-*, and bg-linear-to-* utilities for a more idiomatic approach:

• Since you want the gradient to go left to right, use bg-linear-to-r.
• You want the gradient to start at 11.22%, so use from-[11.22%] (or just from-10 if precision isn't critical).
• The starting color is #536989, so add from-[#536989].
• The gradient should end at 98.88%, so use to-[98.88%] (or to-90 if approximation is acceptable).
• The ending color is #23282F, so add to-[#23282F].

https://tailwindcss.com/docs/background-image#adding-a-linear-gradient

Putting it all together:

bg-linear-to-r from-[#536989] from-[11.22%] to-[#23282F] to-[98.88%]

In addition, for the background clipped by bg-clip-text to appear through the text, the text color must be set to transparent:

bg-clip-text text-transparent

In order for the gradient to span from the beginning to the end of the text - rather than the full width of the div - the width of the div needs to be reduced. Just an e.g.:

max-w-max

A more illustrative example with more striking colors:

• https://play.tailwindcss.com/qPcv6ItGgq

[Simon-He95]

thanks for your reply ❤️
This solution is still not able to handle very complex scenes, such as
background: linear-gradient(217deg, rgb(255 0 0 / 0.8), rgb(255 0 0 / 0) 70.71%), linear-gradient(127deg, rgb(0 255 0 / 0.8), rgb(0 255 0 / 0) 70.71%), linear-gradient(336deg, rgb(0 0 255 / 0.8), rgb(0 0 255 / 0) 70.71%);

[rozsazoltan]

Yeah, this seems like a pretty unique case - there isn't a catch-all solution for everything.
Usually, TailwindCSS provides quick access to the most commonly used solutions. You can still use a custom utility for such a complex formula.

• https://play.tailwindcss.com/a0RtOskxfg?file=css

Since this is a background-image, and the backgroundImage namespace for it no longer exists in @theme (it was still available in v3), I declared a special bg-linear-* utility that uses a previously unused --bg-linear-* namespace.

Using your example, I created bg-linear-custom. From now on, you just need to extend @theme and assign a unique name to each gradient.

@theme {
  --bg-linear-green-to-red: linear-gradient(217deg, rgb(255 0 0 / 0.8), rgb(255 0 0 / 0) 70.71%), linear-gradient(127deg, rgb(0 255 0 / 0.8), rgb(0 255 0 / 0) 70.71%), linear-gradient(336deg, rgb(0 0 255 / 0.8), rgb(0 0 255 / 0) 70.71%);
}

@utility bg-linear-* {
  background-image: --value(--bg-linear-*);
}

<div
  class="text-6xl tracking-[-0.75px] bg-linear-green-to-red"
>
  Hello World
</div>