How to remove the spinners on a number inputs with Tailwind CSS

If you’ve ever wanted to remove the spinners from a number input, you’re not alone.

While they can be useful, they can also be distracting or unwanted. Let’s see how to remove them in Tailwind CSS.

CSS Class

This solution works in any framework and uses CSS properties.

.no-spinner {
  appearance: textfield;
}

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

Add the no-spinner class to your number inputs to remove the spinners.

Tailwind CSS Class

@layer components {
  .no-spinner {
    appearance: textfield;
  }

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

This integrates the no-spinner class into Tailwind CSS v4. It will show up in Tailwind CSS Intellisense in VS Code.

Tailwind CSS Inline

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

Take a look at the 3 examples here.

That’s all! Which approach should you use? I recommend adding a Tailwind CSS class with @layer, but the choice is yours.