Remove arrows from number input in TailwindCSS

<input 
    type="number" 
    class="[&::-webkit-inner-spin-button]:appearance-none [appearance:textfield]"
/>

The default appearance of the HTML5 number input field is not exactly suitable for all designs. The up and down arrows - or spin boxes as they are officially known - are not exactly aesthetically pleasing. Removing the arrows is not the easiest thing to do, but fortunately it is not impossible. The problem is that there is no agreed standard and so a different solution is needed for webkit browsers and Firefox.

In webkit you need to style the ::-webkit-inner-spin-button and the ::-webkit-outer-spin-button pseudo classes on number input and set the appearance to none and margin to 0 . With TailwindCSS you can do this with the following code:

<input
    type="number"
    class="[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0"
/>

In Firefox you need to set the appearance property to textfield to work properly.

<input
    type="number"
    class="[appearance:textfield]"
/>

The final version is:

<input
    type="number"
    class="[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [appearance:textfield]"
/>

@tailwind base;
@tailwind components;
@tailwind utilities;

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