gradient heading https://play.tailwindcss.com/MAhAxhFwTC

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.gradient-text {
  background: linear-gradient(
    141.27deg,
    #ff904e -4.24%,
    #ff5982 21.25%,
    #ec68f4 44.33%,
    #79e2ff 83.46%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: bg-pingpong 10s ease infinite alternate;
}
@keyframes bg-pingpong {
    from {
        background-position: 0% 0%
    }
    to { 
        background-position: 50% 0%
    }
}

gradient.html

<div class="flex h-full w-full items-center justify-center bg-slate-700 p-10">
  <h1 class="gradient-text text-4xl font-bold uppercase">WOW, this is cool</h1>
</div>