JSFiddle - React, Tailwind, and code Playground

HTML

<p>A normal number input for comparison:</p>
<input type="number" value="99" id="control" />

<p>Try hovering and clicking on the lower half of the decrement button. Note how the cursor prematurely changes to an I-bar text cursor. You can also manage to click and activate the decrement button even though the cursor seems to be below the button and the button doesn't flash blue to indicate that it was clicked.</p>
<input type="number" value="99" class="custom-font-size" id="broken" />

<br /><br />

<p>Here's the CSS hack/workaround that some folks are using:</p>
<input type="number" value="42" class="custom-font-size" id="fixed" />

CSS

.custom-font-size {
    height: 34px;
    
}
input[type="number"] {
    font-size: 15px;
}

#fixed::-webkit-outer-spin-button,
#fixed::-webkit-inner-spin-button {
    height: auto;
}