Multiple values for bg-clip

[dicash]

The MDN example with border image uses multiple values for bg clip:

#rounded {
  width: 200px;
  border: 10px solid transparent;
  padding: 20px;
  border-radius: 20px;
  background-image:
    linear-gradient(white, white), linear-gradient(to right, cyan, lime);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

Tailwindcss doesn't have a way to provide multiple values for background clip.

❌ bg-clip-[padding-box,border-box] - ignored
❌ bg-[clip:padding-box,border-box] - converted to background-color:padding-box,border-box

The only way for now is [background-clip:padding-box,border-box].

Would be helpful to have generic ways to set multiple values as foo-[bar:baz,qux] and foo-bar-[baz,qux].

[rozsazoltan]

bg-clip-* exists in Tailwind CSS v4 and allows the use of default values.

• https://tailwindcss.com/docs/background-clip#basic-example

You can also enable arbitrary values yourself:

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

@utility bg-clip-* {
  background-clip: --value([*]);
}

<div
  class="
    m-4 w-[200px] border-solid border-[10px] border-transparent p-[20px] rounded-[20px]
    bg-[image:linear-gradient(white,white),linear-gradient(to_right,cyan,lime)]
    bg-origin-border bg-clip-[padding-box,border-box]
  "
>
  This element is surrounded by a border image with rounded corners!
</div>

However, I think this really should work by default, right?

[rozsazoltan]

You can introduce your own namespace if you want to avoid arbitrary values:

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

@theme {
  --bg-clip-pborder: padding-box, border-box;
}

@utility bg-clip-* {
  background-clip: --value(--bg-clip-*, [*]);
}

<div
  class="
    m-4 w-[200px] border-solid border-[10px] border-transparent p-[20px] rounded-[20px]
    bg-[image:linear-gradient(white,white),linear-gradient(to_right,cyan,lime)]
    bg-origin-border bg-clip-pborder
  "
>
  This element is surrounded by a border image with rounded corners!
</div>