1 Gradient on multiple elements

I wrote a div element with some buttons inside. I want to clip the background with the button elements, so that the button background will be colorful and the background color for the element outside of the buttons is black. (Thanks to @NINE for the picture) However, I can't seem to find a way in the Tailwind CSS docs (I'm using NextJS)

return (
  <div className="flex mt-10 flex-col items-center">
    <div className="relative">
      <div className="bg-gradient-to-br from-[#70d6ff] via-[#ff70a6] to-[#e9ff70]">
        <div className="p-4 font-semibold grid grid-cols-3 items-center">
          <button className="bg-transparent bg-clip-padding border rounded p-2" onClick={() => {setView(10);}}><span>Kelas 10</span></button>
          <button className="bg-transparent bg-clip-padding border rounded p-2 ml-2" onClick={() => {setView(11);}}>Kelas 11</button>
          <button className="bg-transparent bg-clip-padding border rounded p-2 ml-2" onClick={() => {setView(12);}}>Kelas 12</button>
          <div className="grid grid-cols-2 col-span-3 space-x-2 mt-2">
            <button className="bg-transparent bg-clip-padding border rounded p-2" onClick={() => {setDateYesterday();}}>Kemarin</button>
            <button className="bg-transparent bg-clip-padding border rounded p-2" onClick={() => {setDateTommorow();}}>Besok</button>
          </div>
          <button className="bg-transparent bg-clip-padding border rounded p-2 col-span-3 mt-2" onClick={handleCopy}>{copyMessage}</button>
        </div>
      </div>
    </div>
    <Display/>
  </div>
)

Is there a way, or is it impossible with the Tailwind CSS currently?

What I tried: Using every bg-clip- in Tailwind CSS. What I expect: The background on the button element stays, and for the elements/spacing outside of the button element to be black.

Edit: So I'd like bg-clip-text but reverse it so that the text is still white but the background is the colored one instead of the text.

I revised the answer that I posted for editing.

It's hard to find the clip-path among tailwind classes

I tested it once with pure-css.

It won't be the perfect answer, but I hope you're close to solving the problem...!

global.css

...
/* bg-gradient-to-br from-[#70d6ff] via-[#ff70a6] to-[#e9ff70] */
button.custom-clip {
  clip-path: xywh(0 0 100% 100% round 0.25rem);
  background: white;
}

button.custom-clip:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom right, #70d6ff, #ff70a6, #e9ff70);
  border: 1px solid white;
}

jadwalRewrite.tsx

...
    return (
        <div className="flex mt-10 flex-col items-center">
            <div className="relative">
            <div className="">
                <div className="p-4 font-semibold grid grid-cols-3 items-center">
                    <button className="custom-clip rounded border-none" onClick={() => {setView(10);}}>
                        <span className="block w-full h-full border p-2 rounded">Kelas 10</span>
                    </button>
                    <button className="custom-clip rounded ml-2 border-none" onClick={() => {setView(11);}}>
                        <span className="block w-full h-full border p-2 rounded">Kelas 11</span>
                    </button>
                    <button className="custom-clip rounded ml-2 border-none" onClick={() => {setView(12);}}>
                        <span className="block w-full h-full border p-2 rounded">Kelas 12</span>
                    </button>
                    <div className="grid grid-cols-2 col-span-3 space-x-2 mt-2">
                        <button className="custom-clip rounded border-none" onClick={() => {setDateYesterday();}}>
                            <span className="block w-full h-full border p-2 rounded">Kemarin</span>
                        </button>
                        <button className="custom-clip rounded border-none" onClick={() => {setDateTommorow();}}>
                            <span className="block w-full h-full border p-2 rounded">Besok</span>
                        </button>
                    </div>
                    <button className="custom-clip rounded col-span-3 mt-2 border-none" onClick={handleCopy}>
                        <span className="block w-full h-full border p-2 rounded">{copyMessage}</span>
                    </button>
                </div>
            </div>
            </div>
            <Display/>
        </div>
    )

result