Padding and alignments of buttons, etc are weird when using styled + tailwind

When using Prime React with Styled + Tailwind options (Vite and Nextjs, for example), the padding on the button and the alignment of the icons/ other components is different than what is shown on the documentation page.

When using the original values in vite-styled-tailwind/src/index.css:

font-size: 16px;
line-height: 24px;

The button and the input field have excessive padding, the icon in the cutton is too low, radio buttons look normal.

Now I change the values in in vite-styled-tailwind/src/index.css:

font-size: 14px;
line-height: 18px;

to match font size: 14px used the Button Component documentation page (https://primereact.org/button/). line-height is not used there, interestingly enough.

As one can see, the buttons look different, also the alignment of the radio buttons and the icon inside the button is off:

There seems to be some issue here where Tailwind is interfering with the layout, can anyone help out? Thanks.

Start with vite-styled-tailwind/src/index.css and compare its font-size and line-height values with the Button component documentation at primereact.org/button/. Reproduce the styling in the Vite and Next.js examples, then verify that button and input padding and icon and radio alignment match the documented appearance.