I tried to create a gradient text with tailwindcss but the bottom of the string is getting cut off.

Letters like 'g' or 'p' that hand below the text line get partially cut off when making a string gradient with tailwindcss (see image below). I think this is happening because the gradient only goes to the bottom of the text line, so anything below it does not have a gradient background, but I don't know how to fix it.

Bottom of letters get cut off

I am using tailwinds cropping to text to create a gradient background behind my text.

This is the exact code in my app:

<div >
  <div class='relative max-w-6xl mx-auto pt-20 sm:pt-24 lg:pt-32'>
      <h1 >Testing Image grapes plane page</span></h1>
  </div>
</div>

I have tried using the with the sting in a different and I even tried using one of the boilerplate components(the one at the bottom of the page) from the tailwindcss website but the issue still persisted.

If anyone could help that would be greatly appreciated!

CodePudding user response：

I think the h1 tag has some pre-defined heights so I edited their heights and that's working fine

look at that code below