The Blog of Rizal Renaldi

Rizal Renaldi

← Back

Tailwind Text Gradient

28 Mar 2022

devlog

Some of the important classes to make gradient background text with Tailwind are: text-transparent and bg-clip-text, the background classes is the same with the one if you want to make regular gradient background.

Note that in some cases, especially the type of the font that has large cap-height, the gradient background will be cut off from the text. Honestly I don't know the correct way to fix this, but what I do is I add padding to which direction the gradient background will filled in.

<h2 class="font-bold tracking-tight text-transparent text-8xl bg-clip-text bg-gradient-to-r from-teal-400 to-indigo-600">
  Tailwind Gradient Text
</h2>

The Blog of Rizal Renaldi

2024 © rizalrenaldi.com — Made with 🖖