How to Remove Number Input Spinners with Tailwind CSS

Live Demo

If you want number inputs without browser spinners, this is the clean Tailwind v4 approach.

You can do this with a reusable utility class or with inline arbitrary variants.

Tailwind v4 Utility Class

Add this in a stylesheet Tailwind processes:

@utility no-spinner {
  appearance: textfield;

  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }
}

Use it like this:

<input type="number" class="no-spinner" />

This keeps the markup clean and gives you a reusable class that feels native to Tailwind v4.

Inline Version (One-Off)

For a single input, inline utilities are fine:

<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"
/>

Plain CSS Version

If you are not using Tailwind for this part of the project:

.no-spinner {
  appearance: textfield;
}

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

Which Option Should You Use?

• Use @utility no-spinner when this pattern appears in multiple places.
• Use inline arbitrary variants for one-off inputs.
• Use plain CSS if Tailwind is not part of the surface you’re editing.

This gives you predictable number input styling without changing the rest of your form styles.

The live demo above includes a default number input, the reusable no-spinner class, and the one-off inline utility variant.