Can Tailwind CSS and conditional coding at Next.js be used to create a display or visibility transition? I am attempting to implement a smooth fade-in effect for exception messages returned by the backend under the responseError object in Context API. However, no transition effect seems to occur with the current code:
{
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
}