How to Remove Arrow on Input type Number with Tailwind CSS

Question

I have an input of type number, and I want to remove the increment/decrement arrows that come with it by default. How can I do that with Tailwind CSS? I looked up for it but found nothing that solves this problem.

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

Answer 1

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;
  }
}