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.
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: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:to match
font size: 14pxused the Button Component documentation page (https://primereact.org/button/).line-heightis 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.