Can't get animated link hover working with Tailwind CSS - html

Question

Hi I'm trying to get an animation working when I hover over links with Nextjs and Tailwind. Anything would help thanks
Example of the working code in standard CSS/HTML
<div class="link-cont">
<div class="link-wrapper">
<a class="link hover-1" href="#">#1 - left to right</a>
</div>
</div>
CSS
.link-cont {
position: relative;
font-size: 24px;
}
.link {
display: inline-block;
position: relative;
text-decoration: none;
padding: 10px 0;
color: #fff;
}
.link-wrapper {
position: relative;
display: block;
padding: 20px 0;
}
.hover-1 {
&:after {
content:'';
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #red;
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.3s;
}
&:hover {
&:after {
transform-origin: bottom left;
transform: scaleX(1);
}
}
}
My code in tailwind
<div className="">
<Link href="/models">
<a className="
ml-auto
font-serif
text-6xl
inline-block
relative
no-underline
px-[10px]
after:absolute
after:w-[100%]
after:h-[5px]
after:bg-black
after:bottom-0
after:left-0
after:scale-x-0
after:origin-bottom-right
after:transition-transform
hover:after:origin-bottom-left
hover:after:scale-x-1
">
models
</a>
</Link>
<Link href="/contact">
<a className="mx-10 font-serif text-6xl">contact</a>
</Link>
</div>
Not sure if this is bugging out from the after and hover states but you should be able to stack pseudo selectors and stuff as per the tailwind docs. Don't really know what's wrong with the code as the after portion of the css does not show up in the inspector.