How to create gradient border with Tailwind CSS
# TailwindCSS# Snippet
Give me the code
<div class="relative rounded-2xl p-8"> <div class="absolute -inset-px bg-gradient-to-r from-yellow-400 to-pink-400 rounded-2xl" aria-hidden="true"></div> <div class="absolute inset-0 bg-zinc-900 rounded-2xl" aria-hidden="true"></div> <div class="z-10 text-zinc-100">Nice border around me!</div> </div>
First we have a
div that has a
p-8 for it's content.
What is behind it is a div that is position absolute and has
-inset-px, meaning it is the same size as the parent div but 1px outside of it. This is the gradient border. It has a
bg-gradient-to-r class that makes it a gradient from left to right. The
to-pink-400 classes are the colors of the gradient.
Then there is the second
div that is also position absolute and has
inset-0 class. This is the background color.