JSFiddle - React, Tailwind, and code Playground
HTML
<select><option>one</option></select>
<input type="text">
<button>foo</button>
<a href="foo">test</a>
SCSS
$padding: 0.5rem;
$margin: 0.25rem;
body {
font-size: 19px
}
select,
input,
button,
a {
padding: $padding;
margin: $margin;
border: 1px solid red;
display: inline-block;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
/* hacky solution for the 1px difference for selects */
select {
padding-top: calc(#{$padding} - 1px);
}