How to send email with Tailwind

Do not index

Introduction

Sending well-designed emails can significantly enhance user engagement. While Tailwind CSS is popular for web development, it can also be used in email templates. In this article, we’ll explore three ways to send emails using Tailwind CSS: Mailhub, React.email, and Maizzle, and their pros and cons.

1. Mailhub

Mailhub is an all-in-one email API that simplifies email sending with templates directly styled using Tailwind CSS. Here’s a brief on how to use it:

You can use the request to send the code directly:

const body = {
	code: "<div class='bg-red-400'>Hello world</div>"
  variables: {},
  from: "test@mailhub.sh",
  to: "test@mailhub.sh",
  subject: "Test",
  language: "en",
};

fetch(`https://api.mailhub.sh/v1/send`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer YOUR_API_KEY",
  },
  body: JSON.stringify(),
})
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

Or via templates

const body = {
  layout_identifier: "{{ layout_identifier }}",
  variables: {},
  from: "test@mailhub.sh",
  to: "test@mailhub.sh",
  subject: "Test",
  language: "en",
};

Pros & cons

✅ Pre-built email templates that are easily customizable with Tailwind.

✅ i18n native support for multi-language emails.

✅ Excellent for transactional emails.

✅ Very customizable

❌ Limited to Mailhub’s ecosystem (might require adjustments if migrating).

2. React.email

React.email is a library that allows developers to build email templates with React components, fully supporting Tailwind CSS. This approach provides flexibility for those familiar with React.

import { Html, Text, Tailwind } from "react-email";

const WelcomeEmail = () => (
  <Tailwind>
    <Html>
      <div className="bg-green-600 text-white p-4">
        <h1>Welcome to our service!</h1>
        <p>We're excited to have you on board.</p>
      </div>
    </Html>
  </Tailwind>
);

✅ Familiar for React developers.

✅ Easily integrated if you have a React or Next environment

✅ Supports Tailwind CSS natively.

❌ Not compatible with other frameworks

❌ Requires setting up a rendering service (like Node.js with Nodemailer)

❌ Can be overkill for simple transactional emails.

3. Maizzle

Maizzle is a framework for creating HTML emails using Tailwind CSS. It compiles your templates into optimized HTML for email clients.

# Initialize a new Maizzle project
npx create-maizzle

You must then create your pages, generate them and import them into your email provider (Mailhub, Sendgrid, Resend, etc.)

Documentation: https://maizzle.com/docs/introduction

✅ Designed specifically for building responsive HTML emails with Tailwind.

✅ Optimizes the final HTML for email compatibility.

❌ More complex setup compared to Mailhub.

❌ Have to generate every time when changing & reimporting the template