Tailwind CSS Gradient text

Basic example

To get gradient text you need to use few classes:

• .text-transparent: This makes the actual text transparent and shows the background (which has the gradient)
• .bg-clip-text: This makes the background only show on the text outlines
• .bg-gradient-to-{flow}: This is used to state what direction the gradients flow
• .from-{color}: Set the beginning color in our case to primary
• .to-{color}: This sets the end color, in our case danger

        
            
        <p
          class="bg-gradient-to-r from-primary to-danger bg-clip-text text-transparent">
          Gradient text
        </p>