经过一个小时的忙碌，我想出了一个办法。

<h2 className="text-4xl w-full text-transparent bg-clip-text font-extrabold bg-gradient-to-r from-white to-sky-500/10 p-2">
       Welcome To <br /> My Personal PortFolio 
</h2>

添加

-webkit-background-clip: text; /* apply background clip */
-webkit-text-fill-color: transparent;

使文本剪辑渐变

h2 {
  font-size: 48px;
  font-weight: 800;
  margin: 0;
}

h2.gradient-text {
  background: -webkit-linear-gradient(45deg, #09009f, #00ff95 80%);
  -webkit-background-clip: text; /* apply background clip */
  -webkit-text-fill-color: transparent;
}

<h2 class="gradient-text text-4xl w-full text-white font-extrabold bg-gradient-to-r from-sky-500/20 to-sky-500/75">
  Welcome To <br /> My Personal PortFolio
</h2>

像这样在课堂上给予

class:"text-base font-bold whitespace-nowrap text-transparent bg-clip-text bg-gradient-to-br from-yellow-400 to-yellow-500"

总结一下你的答案。在版本3.3.2中测试。
您应该添加text-transparent、bg-clip-text、背景渐变类（例如bg-gradient-to-r）、gradient color stops（例如from-pink-500，to-violet-500）。

<!-- Basic example -->
<span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">
    Hello world
</span>

<!-- Arbitrary color values -->
<span class="bg-clip-text text-transparent bg-gradient-to-r from-[#ef4444] to-[#0f766e]">
    Hello world
</span>

<!-- Color stops -->
<span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 from-5% to-violet-500 to-70%">
    Hello world
</span>

<!-- More color stops -->
<span class="bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90%">
    Hello world
</span>