Have you ever wondered why designing HTML emails can’t be as easy as building your next stunning website? Tailwind CSS has simplified web design, so why not take this efficiency into email design? Meet Mailwind, a powerful tool that allows you to harness the utility-first approach of Tailwind CSS for crafting eye-catching HTML emails.

Why Choose Mailwind?

Mailwind allows you to use the same Tailwind utility classes that you love for web design directly in your HTML emails. I’ve used it for volt.fm and pikaso.me, and it has made the task of designing emails a breeze!

Installation Guide

Getting started with Mailwind is simple. Just run the following command in your terminal:

npm install -g mailwind

Using Mailwind

Once you have Mailwind installed, you can design your HTML email as you would normally using Tailwind utility classes. After crafting your email, you can use the following commands to create the necessary CSS or inline HTML:

• To generate the corresponding CSS file:

mailwind --input-html email.html --output-css style.css

• To generate inlined HTML:

mailwind --input-html email.html --output-html email-inlined.html

Understanding Mailwind with an Analogy

Think of designing HTML emails like preparing a delicious dish. You begin with fresh ingredients (your utility classes from Tailwind), then you follow a recipe (the HTML structure). After combining everything, you need to serve it correctly—this is where Mailwind comes in! Just like how you would blend flavors to create a sumptuous meal, Mailwind takes your HTML and whips it into a beautiful email format, either with a side of CSS or an all-in-one inline serving!

Available Options

Mailwind provides several options to customize your email design:

• –input-css: Specify the path to your base CSS file, default is style.css.
• –input-html: The path to your HTML email file.
• –output-css: The generated CSS file path.
• –output-html: The generated inlined HTML file path.
• –tailwind-config: The path to your custom Tailwind configuration, default is tailwind.config.js.

Important Notes

In the default configuration file, units are converted to pixels—ideal for HTML emails!

Example in Action

Let’s consider a simple email.html file with the following content:

html
html
  body
    p class="font-bold text-lg">Welcome

mailwind   --input-html email.html   --output-css style.css   --output-html email-inlined.html

.text-lg {
    font-size: 18px; 
}

.font-bold {
    font-weight: 700; 
}

html
html
  body
    p class="font-bold text-lg" style="font-size: 18px; font-weight: 700;">Welcome