Creating a Gradient Border with Tailwind CSS

When we want a gradient border for a div Tailwind CSS does not have a utility class to directly create a gradient border. So we have to make a solution of our own. In this article, we can look at what is the workaround we should use to bring in the cool effect of gradient border in our project.

The end product will be as below:

The Workaround

The gist of this workaround is to create one div with a gradient background and a second div placed on top of it that will hold our content.

So let's start off with a div having rounded corners and a gradient of our choice.

<div class="rounded-xl p-1 bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400"></div>

We have added a p-1 class so that when we add the inner div it will be displayed inside our gradient div leaving padding of 0.25rem which makes it look like a border.

Next, let's add the inner div

<div class="bg-zinc-900 p-12 rounded-xl"></div>

It is important to note that we should add a background class to the inner div only then will the effect of the border be happening. In this example, I have used bg-zinc-900 as the inner div background color. Now that our inner div is also done we can add any content inside this div. The code for the above example is as below:

<div class="rounded-xl p-1 bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400">
    <div class="bg-zinc-900 p-12 rounded-xl">
      <h4 class="text-4xl font-bold text-gray-100 tracking-tight">Gradient Border with Tailwind CSS</h4>
    </div>
</div>

With that, we have created a div with gradient border.