Create a show / hide transition with Tailwind and Next - css

Question

Is there any way to create a display or visibility transition using Tailwind and a conditional code at Next? I'm trying something like this, what I would like to achieve is a smooth fade in effect when the backend returns a exception message under the responseError object (using Context in Next) but there's no transition effect at all:
{
responseError ?
<span className={`${ responseError ? "visible transition-all ease-in-out delay-150 duration-300" : "invisible"} pt-4 text-sm text-red-500 font-['Poppins'] font-bold `}>
username or password incorrect
</span>
: null
}
or
{
responseError ?
<span className={`${ responseError ? "visible transition-all ease-in-out delay-150 duration-300" : "invisible"} pt-4 text-sm text-red-500 font-['Poppins'] font-bold `}>
{ responseError.message }
</span>
: null
}

Answer 1

Use opacity instead of visibility.
This stack overflow answer goes over a similar issue you are facing. In short, the visibility property has two possible values: visible or hidden. On the other hand, opacity can be between 0 and 1, so proper keyframes can be applied when using the transition property.
As a side note, I noticed you are checking for the responseError twice, once to render the <span> and again to apply tailwind classes. This will cause your fade in transition to only work when fading in because the <span> is only rendered when responseError exists. Instead, try something like this:
<span className={`${ responseError ? "opacity-100" : "opacity-0"} transition-opacity ease-in-out delay-150 duration-300 pt-4 text-sm text-red-500 font-['Poppins'] font-bold `}>
{ responseError ? responseError.message : '' }
</span>