Building an email template means dealing with table, tr, td tags a lot. And also need to check the compatibility of the CSS rules, to make sure it will be rendered nice for all email clients.
Previously I got a task to create an HTML email template. It is included with the design, so I create the system too. It is a tiny system that just I pick from the current website like the font and colors.
I design the template using Figma, I decide to create the max-width to 580px, since the content is not much, just a changelog notification email with some comments.
On the first try, I build using Pinegrow (just wanted to make things easy), but seems like no different. I still need to add a default table reset every I insert a table tags.
Keep try on finding the easiest solution to make a piece of email template on the internet. I found a blog that has list of email development tools and resources, then my eyes stop on the "tailwindcss" word.
An email prototyping framework using tailwind. This makes me really interesting since I like the utility class approachment by Tailwindcss. The framework name's is Maizzle.
The framework can do email-optimized CSS inlining, mean that no need to add
style=" " attribute in every tags. Maizzle will convert the tailwindcss classes to inine css.
It is just like creating an HTML docs for website. Now I just need to focus how the table structure for the my layout design.
If you're looking for a framework that offers abstractions like
<column>, then Maizzle might not be the right choice for you.
Maizzle is using Tailwindcss, So, if you prefer multi-column you gonna need to use Tailwind percentage widths.