How to Remove Arrow on Input type Number with Tailwind CSS

So i found the solution for this -> On your global.css you have to add

@layer base {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

<input type="number" placeholder="Numéro de téléphone" className="border p-4
outline-none appearance-none" />

this with tailwind here a link you can look on it tailwind

and with normal css :

<style>
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
</style>
<input
  type="number"
  placeholder="Numéro de téléphone"
  className="border p-4
  outline-none"
/>

To remove the arrows you need to set appearance to none (source[https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp])

If you use TailwindCSS 3 you could try this: https://tailwindcss.com/docs/appearance, if you use TailwindCSS 2, this: https://v2.tailwindcss.com/docs/appearance.

I hope this solves your issue.