Today I'm releasing a set of free HTML Transactional Email Templates. Check them out here:
These templates are super cool because they're built using Tailwind CSS, and the repository contains all of the build tools required to use Tailwind in HTML emails, making sure they render correctly across different browsers & devices. This is all powered by Maizzle - which provides CSS post processing to embed Tailwind into an email and apply a bunch of HTML email best practices.
Oh and they support Dark Mode out of the box ;-)
Why Tailwind CSS?
Tailwind CSS gives you "utility classes" to use in your HTML such as p-48 (apply padding of 48px to all 4 sides of an element) or rotate-90 (rotate an element 90 degrees). You can use these utility classes to build almost anything in HTML, without touching CSS.
At first this seems a bit awkward, like you're inlining CSS inside your HTML, but after you get used to the syntax it makes adding styling to HTML pages extremely productive. You don't need to switch context to CSS and come up with class names or an informal class hierarchy. It's hard to state how much more productive you can be in Tailwind, but it really is a massive boost when you're building HTML apps (or email templates in this case!)
If you do want to make components (e.g. .btn) you can use the @apply CSS directive to bundle up styles into components and reuse them.
But how?
The included Maizzle configuration post-processes all of your HTML using various PostCSS plugins. In the end, you just write normal HTML with Tailwind and Maizzle takes care of building your HTML templates out, and spits them into the /dist directory when complete.
Easy!
Who can use them?
Anyone, for any reason. They're MIT licensed so feel free to do what you like with them.
What are Transactional Emails?
Transactional emails are automated emails sent on a one-time basis, typically triggered by a user interaction or system update in your website / app. They are usually sent to one person at a time, and contain important or actionable information for your service.
Typical transactional email types include account notifications, receipts, updates, password reset notifications, magic sign up links and many, many more.
Want to send your transactional emails through an Independent 💪, privacy-focused 🕵️ and eco-friendly 🌱 provider?
Sign up for an account at OhMySMTP
Top comments (0)