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">© 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 😇