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

[elburro1887]

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.

[melloware]

Yeah this is tricky with Tailwind + Styled mode. There are lots of conflicting CSS I am sure.

[elburro1887]

What would you suggest? Should I remove Tailwind altogether, or use Unstyled mode?

[melloware]

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.

[amurilo]

Can you provide a stackblitz so I can take a look on the problem?

[elburro1887]

The code I tested is the one from this folder in the repo:
https://github.com/primefaces/primereact-examples/tree/main/vite-unstyled-tailwind