Overview

It’s no secret that all email clients have access to the source code of the emails we send. This means they can modify or restrict that code as they see fit.

For this reason, it’s important to consider certain limitations when sending emails, especially to users of the Gmail email client (this includes Gmail accounts and other domains managed through Gmail).

In the case of Gmail, some of these limitations directly affect the CSS styles of our email, for example, users who receive emails using flexbox will be negatively affected as Gmail does not support this CSS style.

Gmail-Specific CSS Limitations

In the case of Gmail, some limitations directly affect the CSS styles used in your email. For example, Gmail does not support certain CSS properties, such as flexbox, which can cause layout issues for users.

Here is the list of supported styles in Gmail.

Solving CSS issues with compileToCssSafe

Currently, to try to solve this, we have a feature at the time of sending emails, in which you can define the compileToCssSafe property inside options at the time of sending the email.

Tailwind CSS compilation does not work?

If you’re using Tailwind CSS and encounter problems with the styles in your email, the issue likely lies in your project’s compilation process. Tailwind CSS is compiled into pure CSS during the execution of the client’s project environment.

After verifications, this system does not fail in any of the cases so, check the following if you have problems with the compilation:

• Check that you have composeTailwindClasse checked in options when sending the email.
• Check that the Tailwind CSS classes are well written and exist.
• No additional/custom Tailwind CSS variables or settings are allowed. If you want to use them you must manually compile the styles.
• Check that you have the latest version of the Dymo API library for Node environments. You can see more here.
• Check that the style conversion dependency is installed and is not showing any errors.