Difficulty to center icons in the footer using Tailwind

[muadzcaliph23]

I find it difficult to center icons in the footer when using Tailwind with React Email. It appears to be centered on preview, but when I send the email, weirdly the icons are not centered. I have to use manual padding in order to make it centered. The manual padding makes the icons shift to the right on preview, but centered when it is sent through email.

Not sure if there is any issue with the code. Thanks for your help in advance!

Below are some snippets of the code that are related:

This is the initial code where the preview seems fine, but when sent through email, icons are shifted from the center.

It appears like this when sent through email.

This is after I add padding. I can only fix it this way.

[Gumaan-Mahar]

If you include the items-center property in the className of the second div, it will ensure that the content within the div is centered both horizontally and vertically.

[muadzcaliph23]

Still doesn't work

[Gumaan-Mahar]

It turns out that default utilities like justify-center and items-center in Tailwind CSS don't have good support for Gmail. Therefore, you'll need to find a workaround.
You previously mentioned that manual padding is effective. If that's true, have you experimented with approaches such as className="pl-[50vw]" or className="w-1/2 mx-auto"?

[muadzcaliph23]

Thank you for the explanation :)

I have experimented with your suggested commands. Turns out only className="pl-[43vw]" works.

[gabrielmfern]

React Email is not WYSIWYG, so you still have to worry about email compatibility when doing your own styles. We do not do any transformations on them before rendering. Also, the preview is just an approximation — we only render the email template and show it through an iframe.

We provide the render utility to facilitate the rendering process for users on various environments, but what we ensure is going to compatible is going to be our components. So, if you are using Gmail here, for example, that is the reason the centering with flex and justify-center do not work.

See https://www.caniemail.com/features/css-justify-content/ for more info on this.

---

This is a pretty common misconception that always happens to come up around discussions and issues. This would be really great to be documented, but I'm still unsure of how to get this documented. Would love to know your opinions on this :)