Underline transitions on hover give thick border - css

Question

I am trying to create an underline transition for my menu items. I followed the answer on this post but with small difference :
On the answer it uses for setting the border css :
a { text-decoration: none; display: inline-block; }
a:after {
content: '';
display: block;
border-bottom: 1px solid blue;
width: 0;
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}
a:hover:after { width: 100%; }
<a>A link with an animated bottom border</a>
For my example i'm using :
a { text-decoration: none; display: inline-block; }
a:after {
content: '';
display: block;
width: 0px;
border-bottom-width: 1px;
border-style: solid;
border-color: rgb(21 19 25);
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}
a:hover:after { width: 100%; }
<a>A link with an animated bottom border</a>
While this should give the same result, i'm getting a thicker border and part of it is already displayed
I need to use second example syntax as i'm using Tailwindcss and can't find a way to use border-bottom shorthand with different properties, i expect to get the same result as the first example
Update :
In addition to the accepted answer, this is how to make it work with tailwindCSS, this is the translated answer from css to Tailwind
#apply after:block
after:w-0
after:border-0
after:border-b
after:border-solid
after:border-b-blue
after:transition-all
after:duration-200
after:ease-linear
after:content-[''];

Answer 1

Below you have a working solution with the same result as your first snippet.
I am not familiar with Tailwindcss, but replacing these might work for you:
border-style with border-bottom-style
border-color with border-bottom-color
a { text-decoration: none; display: inline-block; }
a:after {
content: '';
display: block;
width: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(21 19 25);
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}
a:hover:after { width: 100%; }
<a>A link with an animated bottom border</a>