Sponsor: Quick testing across devices with this browser built for web developers.

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 created the system too. It is a tiny system that I just pick from the current website like the font and colors.

I designed the template using Figma, then decided 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 built using Pinegrow (just wanted to make things easy), but it seems like no different. I still need to add a default table reset every time I insert a table tag

Keep trying to find the easiest solution to make a piece of email template on the internet. I found a blog that has a list of email development tools and resources, then my eyes stopped on the "tailwindcss" word.

An email prototyping framework using tailwind. This makes me fascinating since I like the utility class approach by TailwindCSS. The framework name is Maizzle.

maizzle Homepage

The framework can do email-optimized CSS inlining, meaning that there is no need to add style=" " attribute to every tag. Maizzle will convert the tailwindcss classes to inline CSS.

It is just like creating HTML docs for websites. Now I just need to focus on how the table structure for 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 are going to need to use Tailwind percentage widths.

Read the doc for more detail about Maizle

Maizzle - Quickly build HTML emails with utility-first CSS
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

Share

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