When clicking on a C# Blazor web app button, the outline disappears

I am making a C# Blazor web app.Using HTML and Tailwind CSS.

I made a classic button - nothing special - when i click on the button, the outline i have set suddenly dissapears. It will only reappear when i click on a different button.

Here is my button example.

<button class="bg-white outline outline-1 outline-[#1fc2de] active:outline active:outline-1 active:outline-main-colour py-1 px-2 w-full active:scale-95 font-semibold rounded-lg">Trace Outside</button>

Has anyone come across this?

I have tried setting a outline with the 'active:' prefix.I tried hardcoding the colours instead of using my custom tailwind colours.