有一个简单的方法来实现你想要的，这里是如何：
1-首先转到 tailwind.config.js 并将其添加到 extend 中

extend: {
      'animation': {
            'text':'text 5s ease infinite',
        },
        'keyframes': {
            'text': {
                '0%, 100%': {
                   'background-size':'200% 200%',
                    'background-position': 'left center'
                },
                '50%': {
                   'background-size':'200% 200%',
                    'background-position': 'right center'
                }
            },
        }
    },

2-然后将这些类添加到div中：

<div class="text-9xl font-semibold 
            bg-gradient-to-r bg-clip-text  text-transparent 
            from-indigo-500 via-purple-500 to-indigo-500
            animate-text
            ">
      SampleText
</div>

看一下**HERE**

如果您正在寻找config方法的替代方法，我将使用CSS在全局样式中扩展“tailwindcss/components”导入。
在global.css中添加以下内容。查看以下链接以了解有关使用预处理器的更多信息-https://tailwindcss.com/docs/using-with-preprocessors

@import "tailwindcss/components";
@import "./custom-components.css"; <--

在custom-components.css中添加以下内容。

.background-animate {
  background-size: 200%;
  -webkit-animation: AnimateBackgroud 10s ease infinite;
  -moz-animation: AnimateBackgroud 10s ease infinite;
  animation: AnimateBackgroud 10s ease infinite;
}

@keyframes AnimateBackgroud {
  0% {
    background-position: 0;
  }

  50% {
    background-position: 100%;
  }

   100% {
    background-position: 0;
  }
}

如何使用;

<h1 className="background-animate bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 bg-clip-text flex justify-center items-center content-center w-full text-transparent text-5xl select-none">
    A very important title!
</h1>

一个三个三个一个