Tailwind CSS Email Documentation

Introduction

TailwindMail is a visual email builder and compiler. You author with familiar Tailwind utility classes, then compile them into inline-styled, table-backed HTML designed for real inboxes.

Use it for transactional messages, product updates, and marketing templates. Drag blocks on the canvas, edit raw Tailwind in the code pane, or start from a public template. Always preview and send a test before a campaign, especially on older Outlook versions.

Tailwind → email HTML utilities become inline CSS and Outlook-safe markup.
Canvas or code drag sections, grids, and buttons, or type Tailwind source with suggestions.
Preview, spam check, export desktop through mobile frames, a SpamAssassin score, then HTML, minified HTML, or ZIP.

Get started

Sign in with a magic link, GitHub, or Google.

New accounts land in the workspace. Open Editor for a blank template, browse public templates to download compiled HTML, or import an existing Tailwind page.

Sign in with email, GitHub, or Google.
Create a project (optional) so related emails stay together.
Add a template, import HTML, or start from the public gallery.
Edit on the canvas or in code, then compile and preview.
Send a test, check spam readiness, and export HTML.

Workspace

After sign-in, the app sidebar is the home for projects, templates, archived items, and account settings.

Projects folders for campaigns or products. Each project has a cover, title, and the emails inside it. Free accounts get 1 project; Pro is unlimited.
Templates every email you create or import. Filter by latest, name, in a project, or unassigned. Free accounts get 3 templates; Pro is unlimited.
Archived hidden projects and templates you can restore. Archived items still count toward Free plan limits.

From Templates you can create a blank email, import a file, or open an existing one in the editor. From a project you can add emails that stay attached to that folder.

Visual editor

The editor has three columns: structure on the left, canvas or code in the middle, compiled result on the right. Switch the middle pane between Drag & drop and Code.

Left sidebar tabs:

Layers the document tree. Select, reorder, duplicate, or delete blocks. Multi-select with Shift or ⌘/Ctrl click.
Components the block library. Drag a component onto the canvas or onto a layer.
Global email canvas settings (background, alignment, max width, padding, margin). These wrap the message and are not Tailwind source.

Select a layer to open the inspector: text, link href, colors, size, spacing, alignment, and image source. Images can come from a URL, upload, or the media library. Changes autosave when you are signed in. The file menu covers rename, publish, export, send a test, and archive.

Code editor

Code mode is the Tailwind source for the email body. Type HTML with utility classes the same way you would on the web. The editor suggests Tailwind classes and HTML tags as you type (Tab or Enter to insert).

Canvas and code stay in sync. Prefer code for precise class lists; prefer the canvas for layout and visual edits. The compiled pane on the right always shows the email-safe result, not the authoring markup.

<!-- Tailwind source -->
<div class="mx-auto max-w-[465px] bg-black p-5 text-white">
  <h1 class="text-2xl font-normal">Welcome</h1>
  <p class="mt-4 text-sm leading-relaxed">
    Thanks for joining TailwindMail.
  </p>
</div>

Components

Drag these blocks onto the canvas. Each one starts as Tailwind markup the compiler can flatten into email-safe HTML.

Sections

Section, hero, card, footer, feature

Grid

1–4 columns, spacer, divider

Typography

H1–H3, paragraph, link, lists, quote, preheader

Buttons

Primary, secondary, outline (compiled as bulletproof links)

Media

Image, logo, avatar

Content

Social links, unsubscribe, badge, code snippet

Email canvas

Global settings wrap the whole message. They are not layers in the tree and do not appear in Tailwind source.

Fill solid color, gradient, or background image.
Position left, center, or right alignment of the content table.
Max width typical email column, often around 560px.
Padding and margin vertical and horizontal shell spacing.

Compile

Compile turns Tailwind source into send-ready HTML. The pipeline builds used utilities, rewrites layout to tables, inlines styles, flattens containers, adds presentational attributes, polishes bulletproof buttons, sanitizes the DOM, and checks an email-safe tag allowlist.

<!-- Compiled email-safe HTML -->
<div style="margin:0 auto;max-width:465px;background:#000;padding:20px;color:#fff">
  ...
</div>

After compile, body content uses inbox-safe tags such as table, img, a, and headings. Scripts, forms, iframes, and most semantic wrappers are stripped or rewritten. Drop the exported file into Laravel, Node.js, Resend, Brevo, SendGrid, or any provider that accepts HTML.

Preview & test

The result pane shows what inboxes will get, not the Tailwind source.

HTML the compiled markup you copy or export.
Live an authoring preview of the canvas.
Desktop / tablet / mobile compiled frames at 640px, 768px, and 390px.

Send a test from the file menu or the result pane. Enter an address; the last two recipients are remembered on this browser. The message subject is prefixed with [Test]. Open it in Gmail, Outlook, and Apple Mail before you ship.

Spam score

The result pane includes a spam inspector. TailwindMail compiles the current draft and scores it with SpamAssassin (via Postmark’s spam check). A score under 5.0 is treated as ready; higher scores show a risk badge and the rules that fired.

Use it as a content checklist (links, images, wording), not a guarantee of inbox placement. Recheck after large copy or structure changes.

Export

File menu → Export (⌘E / Ctrl+E). Exports always use a fresh compile.

HTML one .html file ready to paste into your sender.
Minified HTML comments and extra whitespace removed. Outlook conditional comments () are kept.
ZIP HTML plus downloaded images in ./assets/ so you can host them yourself.

Media library

Upload JPEG, PNG, GIF, or WebP up to 5 MB, or import from a public image URL. Assets are stored per account. Pick an image from the layer inspector, or manage the library from an image field. Hosted URLs are what compiled HTML references unless you export a ZIP and re-host the files.

Import

From Templates, import an .html, .htm, or .txt file (512 KB max). If the file is a full document, the body inner HTML is used as Tailwind source, then compiled. Name the template and it opens in the editor. Hitting the Free template limit sends you to Pro checkout.

Publish

Drafts stay private. Publish from the file menu to get a shareable preview URL (/p/…). Copy the link or open it in a new tab. Unpublish to take the link down. Publishing does not send the email; it only shares a compiled preview.

Public templates

The Templates gallery is open source: official and community designs with live preview, Tailwind source, and compiled HTML download. Filter by group, search, and sort.

To submit a design, fork tailwindmail-templates, copy starter-template/, add meta.json, source.html, compiled.html, and preview.png, then open a pull request.

Guides

Longer write-ups live on Resources: inlining, Outlook, Gmail’s 102 KB clip, dark mode, buttons, images, media queries, and testing. Use this docs page for product how-to; use Resources for email-client depth.

Account settings

Open Account from the sidebar. Tabs cover profile information, billing contact, invoices, and account deletion.

Information display name and email.
Billing plan, payment method, billing address, and cancel Pro.
Invoices download receipts for completed charges.
Delete my account permanently remove the workspace.

Email clients

Compiled output is designed for Gmail, Apple Mail, Outlook, Yahoo Mail, AOL, Proton Mail, and modern clients like HEY and Superhuman. Client rendering still varies. Stick to supported layout patterns, keep images explicit, and always send a test especially on desktop Outlook.

Exported HTML is portable. Drop it into Laravel mailables, Node scripts, or providers such as Resend, Brevo, SendGrid, Postmark, Mailgun, Amazon SES, and Mailchimp.

Shortcuts

Canvas (Drag & drop) shortcuts. Use Ctrl instead of ⌘ on Windows and Linux. Open the full list with ? in the editor.

Action	Keys
Save	⌘S
Export	⌘E
Undo / redo	⌘Z / ⇧⌘Z
Duplicate	⌘D
Select all	⌘A
Delete	⌫ / Del
Deselect	esc

Documentation