How to Remove Spinners on Number Input with Tailwind CSS (3 Levels) (v3)

Published: Dec 5, 2022 / Updated: Dec 5, 2022

I recommend using @tailwindcss/forms when dealing with inputs. It provides excellent defaults and accelerates the styling process.

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

While they can be useful, they can also be problematic. So let’s eliminate them.

CSS Class (Level 1)

This solution works regardless of the CSS framework you use.

.no-spinner {
  -moz-appearance: textfield;
}

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

You can now add the no-spinner class to your number inputs to remove the spinners.

Tailwind CSS Class (Level 2)

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

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

This solution integrates the no-spinner class into Tailwind CSS.

Now, it will appear as a suggested class when using Tailwind CSS Intellisense.

Tailwind CSS Class Names (Level 3)

Prepare yourself.

<input
  type="number"
  class="[-moz-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"
/>

You can see this approach in action in this quantity input component. Don’t worry, I’ve included the CSS snippet as well.

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