Gradients help to add colors to backgrounds, objects and also text. The make for some eye catching and beautiful typography.

Basic Gradient
Output Sample text
<span class="text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-purple-500"> <span class="font-bold">Sample text</span> </span> Code

You can use all the different available bg-gradient options from tailwind css here.

Top to bottom gradient
Output Sample text
<span class="text-transparent bg-clip-text bg-gradient-to-b from-pink-500 to-purple-500"> <span class="font-bold">Sample text</span> </span> Code

Combine this with one of the underline examples from Underline which allows to create a matching underline to the gradient text.

Gradient Text with matching underline
Output Sample text
<span class="flex"> <span class="text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-purple-500 relative group transition duration-300"> <span class="font-bold">Sample text</span> <span class="absolute -bottom-0.5 block w-full h-1 bg-gradient-to-r from-pink-500 to-purple-500"> </span> </span> </span> Code