Gradient text using Tailwind CSS

Since Tailwind became very popular, here’s a tutorial on how to gradientify your texts. 😇

Intro

• text-transparent – This makes the text itself transparent
• 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
• to-{color} – This sets the end color
• w-fit – This makes the gradient start and end from the bounding box of the text

Here’s an example for you:

<p className="bg-gradient-to-r from-red-500 to-purple-700 w-fit bg-clip-text text-transparent">
	Compiler On Top
</p>

Breakdown

Let’s understand how this all works and how the classes we use work with each other.

1. We use text-transparent because we don’t actually want the real text, we only need the outline of it
2. We apply bg-clip-text which allows us to, as the name suggests, clip the background to outline of the text
3. We also use w-fit because without it, the gradient overflows the bounds of the text meaning we don’t get a clear view of the gradient
4. Lastly, we use normal gradient practices in Tailwind, using bg-gradient

That’s it! This is the best way right now as there is no official support for gradient text colors