Search code examples
javascriptreactjsnext.jsstylestailwind-css

Bottom of gradient text gets cut off tailwindcss

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 class="px-10 sm:px-10 md:px-12 bg-white border-2 border-white border-t-pglightgrey">
  <div class='relative max-w-6xl mx-auto pt-20 sm:pt-24 lg:pt-32'>
      <h1 class="font-semibold text-4xl sm:text-5xl lg:text-6xl tracking-tight text-center bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500">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!

Solution

  • 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👇

    <div class="px-10 sm:px-10 md:px-12 bg-white border-2 border-white border-t-pglightgrey">
  <div class='relative max-w-6xl mx-auto pt-20 sm:pt-24 lg:pt-32'>
      <h1 class="h-[8rem] sm:h-[4rem] font-semibold text-4xl sm:text-5xl lg:text-6xl tracking-tight text-center bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500"><span class="text-center">Testing Image grapes plane page<span/></h1>
  </div>
</div>

    If you wanna try online check this link https://play.tailwindcss.com/nz2Txq1s7G