Gradients are great. Right?
And when it comes to Tailwind CSS it's also great. Right!
So lets make a nice gradient header with Tailwind 🎯
At the example below, I made a simple <h1> with Tailwind codes only.
Please open the pen in full mode or just click here to see it larger (for desktops).
Lets Breat It Down
max-w-screen-md 👉 width of the h1
mt-8 👉 margin-top: 2rem
mx-auto 👉 margin-left: auto; margin-right: auto to center the h1
text-center 👉 text-align: center
text-7xl 👉 font-size: 4.5rem
font-bold 👉 font-weight: bold
bg-clip-text 👉 crop the element’s background to match the shape of the text
text-transparent 👉 making text transparent to clip-text work on gradient
bg-gradient-to-r 👉 the gradient from left to right
from-orange-600 👉 starting color
to-purple-600 👉 end color
I 💙 Tailwind CSS
Top comments (0)