Gradients help to add colors to backgrounds, objects and also text. The make for some eye catching and beautiful typography.
<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.
<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.
<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