Gradient borders with radius solution isn't working with tailwindcss - css

Question

I have seen the gradient borders with radius work on css-tricks with this particular code snippet.
<div class="fem">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum neque debitis at ad fugit, esse sequi rem ab consequatur id sint veniam ex quam adipisci. Ab itaque officia atque id!
</p>
</div>
.fem {
padding: 1rem;
position: relative;
background: #000;
color: white;
border-radius: 8px;
}
.fem:before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
width: calc(100% + 10px);
height: calc(100% + 10px);
z-index: -1;
border-radius: 12px;
background: linear-gradient(130deg,#ff7a18,#af002d 41.07%,#319197 76.05%);
}
I have tested this code on jsbin and it seems to be working perfectly fine.
Now, I'm working on a tailwind application and this same code isn't working for me.
I feel that some of the base styles might be causing this erratic behaviour. I can't seem to figure out how to correct it.
Here is the link to tailwind play
On tailwind, I'm seeing invisible gradient borders

Answer 1

<div class="main">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ullam fugit quaerat voluptates culpa dolores id
veritatis suscipit quo officia minus, ex totam velit praesentium explicabo, exercitationem blanditiis numquam
doloremque?
</div>
<style>
.main {
background-color: black;
max-width: 80%;
padding: 1rem;
position: relative;
color: white;
border-radius: 8px;
}
.main:before {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
width: calc(100% + 10px);
height: calc(100% + 10px);
z-index: -1;
border-radius: 12px;
background: linear-gradient(130deg, #ff7a18, #af002d 41.07%, #319197 76.05%);
}
</style>