Tailwind CSS Border Gradient Tutorial

Adding a gradient to a container is relatively straightforward with Tailwind CSS utility classes, but what happens when you want to address just the border? In this article, we’ll create a neat effect using gradients on the border of a button element using Tailwind CSS.

Adding a tailwind CSS border gradient isn’t technically possible with the current CSS standard and Tailwind CSS features.

Getting to this effect requires a few hacks, but nothing too cumbersome to use on your website or apps.

Let’s start by adding a Tailwind CSS border gradient to a button element centered on the screen for demo purposes.

⚙️ Source code:

📕 Read the full tutorial here:

======

💻 Read the written version:

💎 New to Ruby on Rails? Enroll in my course HELLO RAILS:

⚡️ New to Hotwire course!

Additional Links:

P.S. This stuff takes a long time to make but I love to do it. To help me keep at it consider supporting me. If not monetarily, subscribe to the channel or share it with someone!

[codewithguillaume]

Very good video! Exactly the technique I am using everytime I want a button like this :) Subscribed

[JeanGilbert-ko]

Is it possible to set the same gradient for the button text too ?

[MrZerosixZeroone]

that is an obvious solution, but it does not work if you have transparent gradients and/or backgrounds.