DEV Community

Arrofi Reza Satria
Arrofi Reza Satria

Posted on

Email Marketing with Maizzle and Tailwind CSS

Email marketing is a powerful marketing channel that uses email to promote your business products or services. Email marketing is a form of marketing that can make the customers on your email list aware of new products, discounts, and other services.

Here I will teach you how to create an HTML email with Maizzle and TailwindCSS.

1. Create Project

To create a new project it's quite easy, you can look at the Maizzle Documentation like the code below :

npx degit maizzle/maizzle "your-project-name"
Enter fullscreen mode Exit fullscreen mode

then cd "your-project-name" and npm install

2. Edit your Email using Tailwind CSS

You can start a development local server that watches in localhost with :

npm run dev
Enter fullscreen mode Exit fullscreen mode

Maizzle already has a built in template that you can use, you can use it as your starter template.

localhost maizzle


HTML email structure use table, tr and td as layout. The idea is same as CSS Grid, every column behave like Grid which you can adjust the width using Tailwind class="w-1/2 sm:w-full"

3. Link image with

When using Email HTML often you need to put an image on the email. Since Email HTML doesn't support image assets, you can get the image by hosting your image online. Here I use to host my image. Simply upload and get the URL of the image to put in the src image tag then you are done. Don't forget to reduce the size since it opened between the length of an email.

4. Production

Build production ready to send HTML emails that have inlined CSS and many other optimizations, by running the following command:

npm run build
Enter fullscreen mode Exit fullscreen mode

You can view the result of build production in Build Production folder. Then copy and paste the HTML code to be ready to send to the email receiver.

Build Production Maizzle

4. Send your first html email.

Send your first HTML Email with Insert HTML by Designmodo extension google chrome.

HTML Email Designmodo

Top comments (1)

collemayn profile image

effective content you are sharing with us i appreciate your work . lal kitab ke totke for husband