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

Issue

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.

Solution

It sounds like you are facing an issue with the focus state of the button. Sometimes browsers default styles might interefere with custom ones. Try to manipulate the button on focus explicitly.

.focus:your-class{
// try some rule and see if it works
}

Answered By - Amro Rehawi