Use TailwindCSS For Building HTML Email Template
Building email template means dealing with table, tr, td tags. And need check the compatibility to make sure it will be rendered nice for all email clients.
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.
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
Don't miss it: Best Lifetime Deals for Designers and Developers I'll Regret to Missed
