Why does applying outline and shadow removal work in CSS but not in HTML with Tailwind classes?

[MonaAghili]

I’m trying to remove the outline and box-shadow from a radio button in my project. When I add the following CSS in my stylesheet, it works perfectly and removes the outline and shadow as expected:

input.radio-input:focus, 
input.radio-input:focus-visible, 
input.radio-input:checked:focus { 
  outline: none !important;
}

However, when I try to apply the same styles directly in the HTML using Tailwind CSS classes, the outline and shadow still remain visible. Here's the HTML code I'm using:

<input
  type="radio"
  class="radio-input focus:ring-0 outline-none focus:outline-none focus:shadow-none focus-visible:outline-none focus-visible:shadow-none checked:focus:outline-none checked:focus:shadow-none disabled:opacity-50"
/>

Does anyone know why the styles are not being applied when using Tailwind classes in HTML, but they work when applied through the CSS file? Any help would be appreciated!"