primefaces
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.
Yeah this is tricky with Tailwind + Styled mode. There are lots of conflicting CSS I am sure.
What would you suggest? Should I remove Tailwind altogether, or use Unstyled mode?
well you might be able to debug it and see what is causing the padding issues and recommend a fix to PrimeReact.
If you need TailWind use Tailwind. I use PrimeReact with just a PR theme without Tailwind.
The code I tested is the one from this folder in the repo: https://github.com/primefaces/primereact-examples/tree/main/vite-unstyled-tailwind