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)