Yea, you heard it right... today we are going to build an email template using tailwindcss..

Building an email template is so hard, we have to write our own CSS.. media quires.. etc..

But with the help of tailwindcss we don't need to write the css we use the classes that tailwind offer us ;)

Let's get started..

We are using an email framework called maizzle which uses tailwind behind

Install maizzle

To install maizzle we need to have nodejs installed ;)

npm install -g @maizzle/cli

This will install the maizzle globally

Create a maizzle Project

We are using the template project provided by maizzle ;)

maizzle new https://github.com/maizzle/maizzle.git

Hope you've installed it correctly where ever you wanted :P

Now open the maizzle folder in the editor you like ;) (I Prefer vscode)

Project Structure

When you open the maizzle folder in the editor you see bunch of files and folders..

you might know some files and it's use like package.json, tailwind.config.js etc..

We'll see other files we might don't know them why they're here

config.js

This file hold the configuration of the local build like which files to use.. where to create the build.. etc..

config.production.js

As the file name suggests this file holds the configuration for the production build.

More about Maizzle..

The src folder you see will have different sub folders one for holding assets.. one holding components,layouts and finally out email templates

What are Components ?!

Components are files that you can pull into a Template. You can pass data and content to them, and they help you organize blocks of markup that you use often.

more about components 👉🏻 Components

What are Layouts ?!

Layouts are the foundation of any email template in Maizzle.

Besides the standard parent-child templating relation, you can use Layouts to define markup that doesn't need to change often, like doctype, and or tags, with all the necessary child tags, like .

more about layouts 👉🏻 Layouts

What are templates ?!

Templates in Maizzle contain the body of your email templates.

They're made up of two distinct sections:

• Front Matter
• Your HTML

More about templates 👉🏻 Templates

I hope you might have a little idea what are components,layouts and templates are used for.

Let's build our template..

create a file with any name you like in src/templates folder.. [template.html]

Let's have some front matter in template which will be used in the main.html[layout]

---
title: "Confirm you email"
bodyClass: bg-gray-100
---

is used to extend a html in the template in this case we are extending the src/layouts/main.html which will be having the all the code needed to be in a template which reduces time to rewrite same thing in every template can be solved Just by extending the layout

is where our template lives..

Final Code [templat.html]

---
title: "Confirm your email"
preheader: "Please confirm you email in order to activate your account"
---

<extends src="src/layouts/master.html">
    <block name="template">
            <table class="flex flex-col justify-items-center items-center">
                <tr class="">
                    <td class="pt-32  text-center text-4xl">
                        <p>My Template</p>
                    </td>
                </tr>
                <tr>
                    <td class="bg-white w-600 rounded-sm shadow-sm">
                        <table class="px-32 pt-24 pb-32">
                            <tr>
                                <td>
                                    <p class="text-xl text-gray-700">Hello, $name</p>
                                    <p class="text-4xl">You're Joining with Us?</p>
                                    <p class="text-base font-serif">We are glad to have you on board :), Plesae confirm your mail first. </p>
                                    <div class="hover-bg-indigo-600" style="mso-padding-alt: 16px 24px; background-color: #6366f1; border-radius: 4px; width: 50%;">
                                        <a href="$link" style="display: block; font-weight: 600; font-size: 16px; line-height: 100%; margin-right: 2px; padding-top: 16px; padding-bottom: 16px; padding-left: 24px; padding-right: 24px; color: #ffffff; text-decoration: none;">Confirm email address →</a>
                                    </div>
                                    <div style="padding-top: 16px;">
                                        or alternatively you can copy paste the below link in your browser tab
                                        <a href="$link" style="color: #4f46e5;">$link</a>
                                    </div>
                                    <hr class="mt-32"/>
                                    <p class="text-xl"> If this is not you joining us, you can ignore it safely <br /><br>
                                        Thanks,<br>
                                        Team Bloggy 
                                    </p>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 32px;" class="text-center">
                    <td>
                        <div class="text-center">
                            <a href="https://twitter.com" style="margin-right: 8px;">
                                <img src="https://img.icons8.com/cotton/344/twitter.png" style="border: 0; line-height: 100%; max-width: 100%; vertical-align: middle; height: 40px; width: 40px;" alt="">
                            </a>
                            <a href="https://facebook.com" style="margin-right: 8px;">
                                <img src="https://img.icons8.com/cotton/344/facebook.png" style="border: 0; line-height: 100%; max-width: 100%; vertical-align: middle; height: 40px; width: 40px;" alt="">
                            </a>
                            <a href="https://instagram.com" style="margin-right: 8px;">
                                <img src="https://img.icons8.com/cotton/344/instagram.png" style="border: 0; line-height: 100%; max-width: 100%; vertical-align: middle; height: 40px; width: 40px;" alt="">
                            </a>
                            <a href="https://github.com" style="margin-right: 8px;">
                                <img src="https://img.icons8.com/dusk/344/github.png" style="border: 0; line-height: 100%; max-width: 100%; vertical-align: middle; height: 40px; width: 40px;" alt="">
                            </a>
                        </div>
                        <p style="font-size: 16px">&copy; Maybe No Copyright </p>
                        <div>
                            <a href="#" style="margin-right: 16px; color: #111827;">Privacy Policy</a>
                            <a href="#" style="margin-right: 16px; color: #111827;">Terms & conditions</a>
                            <a href="#" style="margin-right: 16px; color: #111827;">Contact us</a>
                        </div>
                    </td>
                </tr>
            </table>
    </block>
</extends>

Testing the template live..

Maizzle CLI provides use to watch the live changes in browser, to be frank test build is gonna be in the size you never think a HTML file would be :(

serving the test build

maizzle serve

Now Open up localhost:3000 to see the templates and choose which one you wanted to see how it looks

The build files are in a folder build_local

Building the template

maizzle build production

will build the templates and save them in a folder build_production. while building the templates maizzle removes all the unused css styles and make the templates as small as you can think of ;)

Now you can use this template how ever you can think of :P

I've tested this mail template in GMAIL and OUTLOOK it look perfect

How it looks?!

References

How to use google fonts in maizzle?! 👉🏻 use-google-fonts

What is Maizzle? Maizzle

TailwindCSS TailwindCSS

Thanks for reading 😇