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.

maizzle Homepage

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 <row> and <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.

Read the doc for more detail about Maizle

Maizzle - Framework for Rapid Email Prototyping
Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS and advanced, email-specific post-processing.

Don't miss it: Best Lifetime Deals for Designers and Developers I'll Regret to Missed

Let me know your thought or you find a mistake/outdated content for this post.

Get the latest update of tutorials, inspirations and useful resources for website design and development to your email box.