Tailwind appearance-none class not working for input field of type number

I am trying to remove the arrow/spinners that come natively with a number typed input field. I understand that this can easily be done following the article here, by setting the -webkit-appearance and -moz-appearance. With that said, here is my current implementation using a CSS class called .no-spin.

.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.no-spin {
    -moz-appearance: textfield !important;
}

<div>
  <label>Number Input Field w/o spinner</label>
  <input class="no-spin" type="number">
</div>
<div>
  <label>Number Input Field w/ spinner</label>
  <input type="number">
</div>

However, since I am using Tailwind, I am looking for a possible solution where I do not have to resort to CSS classes, just like the other components of my project. I have already tried using an appearance-none class as suggested by the Tailwind Docs but it did not work for me.