Border is being overwritten despite appearing after the original border class

[AsuraKev]

Hi there

I encountered a weird issue where my border is being overwritten when it shouldnt

Consider the following code:
When isActive is set to true, i then apply a border-blue-50 class to change the border color to true, I am expecting it to override my default border color which is transparent but border-transparent takes precedence for some reason. any idea? thanks

const style = clsx(
'p-2 rounded border-2 border-solid hover:border-blue-50 border-transparent flex-1 m-0',
{
'border-blue-50 bg-grey-5': isActive,
}
);