# TailwindMail

> Build faster HTML emails with Tailwind CSS. Write Tailwind markup, compile it into responsive email-safe HTML, and ship campaigns that work in Outlook, Gmail, and Apple Mail.

TailwindMail is a visual email builder and compiler. Use ready-made templates, a drag-and-drop editor, or raw Tailwind source, then compile, preview, and export production-ready HTML.

Public marketing pages are listed below. Signed-in editor, projects, and account pages are private and should not be crawled or cited as documentation.

## Pages

- [Home](https://tailwindmail.dev): Product overview
- [Templates](https://tailwindmail.dev/templates): Email template gallery
- [Resources](https://tailwindmail.dev/resources): Guides and articles about HTML email and Tailwind CSS
- [Docs](https://tailwindmail.dev/docs): How to write, compile, and ship email-safe HTML
- [Changelog](https://tailwindmail.dev/changelog): Product updates
- [GitHub](https://github.com/othastudio/tailwindmail): Source repository

## Templates

- [Email Verification](https://tailwindmail.dev/templates/email-verification): Confirm-your-address email with a single verify CTA, expiry note, and ignore-if-not-you copy.
- [Invoice](https://tailwindmail.dev/templates/invoice-email): Invoice HTML email with amount due, due date, and a pay-invoice CTA.
- [Magic Link Login](https://tailwindmail.dev/templates/magic-link): Passwordless sign-in email with a single magic-link CTA, expiry note, and ignore-if-not-you copy.
- [Newsletter](https://tailwindmail.dev/templates/newsletter): HTML newsletter template with a headline, three story blocks, and a read-more CTA.
- [Order Confirmation](https://tailwindmail.dev/templates/order-confirmation): Ecommerce order confirmation with a view-order CTA and order details.
- [OTP Code](https://tailwindmail.dev/templates/otp-code): One-time passcode email with a large code block, expiry note, and ignore-if-not-you copy.
- [Password Reset](https://tailwindmail.dev/templates/password-reset): Reset-your-password email with a single CTA, expiry note, and ignore-if-not-you copy.
- [Payment Failed](https://tailwindmail.dev/templates/payment-failed): Failed-payment notification with an update-card CTA and what happens next.
- [Receipt](https://tailwindmail.dev/templates/receipt-email): Payment receipt email with amount paid, date, and a download CTA.
- [Shipping Confirmation](https://tailwindmail.dev/templates/shipping-confirmation): Order shipped email with tracking CTA, carrier details, and delivery window.
- [Signup Confirmation](https://tailwindmail.dev/templates/signup-confirmation): Account-created email with a workspace CTA and three next steps after signup.
- [Starter template](https://tailwindmail.dev/templates/starter-template): Reference starter for this gallery: logo mark, heading, body, one CTA, and a footer. Copy this folder when you submit a template.
- [Subscription Confirmation](https://tailwindmail.dev/templates/subscription-confirmation): Subscription confirmation email with plan details and a manage-billing CTA.
- [Team Invitation](https://tailwindmail.dev/templates/team-invitation): SaaS team invite with an accept CTA, expiry note, and ignore-if-not-you copy.
- [Trial Ending](https://tailwindmail.dev/templates/trial-ending): SaaS trial reminder with days left, what you keep, and an upgrade CTA.
- [Welcome Email](https://tailwindmail.dev/templates/welcome-email): Onboarding welcome with a brand header, next steps, and a single primary CTA ready to fork in TailwindMail.
- [marrakech](https://tailwindmail.dev/templates/marakesh-newsletter): Premium Marrakech real-estate newsletter: palmeraie villa, medina riad, Atlas house, and a private viewing CTA.

## Resources

- [Best HTML Email Builders for Developers in 2026](https://tailwindmail.dev/resources/best-html-email-builders-for-developers-2026): Compare the best HTML email builders for developers in 2026, including code-first frameworks, Tailwind workflows, specialist IDEs, and embeddable editors.
- [Can You Use Tailwind CSS in HTML Emails? What Actually Works](https://tailwindmail.dev/resources/can-you-use-tailwind-css-in-html-emails): Yes, you can use Tailwind CSS to build HTML emails but only with a compile step. Learn which utilities work, what breaks, and how to ship reliable output.
- [How to Build HTML Emails with Tailwind CSS: Complete Developer Guide](https://tailwindmail.dev/resources/how-to-build-html-emails-with-tailwind-css): Learn how to build a Tailwind email, compile it to inline CSS and email-safe HTML, and test the result across Gmail, Outlook, and Apple Mail.
- [React Email + Tailwind CSS: Complete Developer Guide](https://tailwindmail.dev/resources/react-email-tailwind-css): Build React Email templates with Tailwind CSS, typed props, reusable components, HTML rendering, provider integration, and cross-client testing.
- [How to Build HTML Emails with a Drag-and-Drop Editor](https://tailwindmail.dev/resources/how-to-build-html-emails-with-a-drag-and-drop-editor): Build production-ready HTML emails with a drag-and-drop editor without losing source ownership, responsive behavior, clean exports, or developer control.
- [How to Build Responsive HTML Emails: Complete Developer Guide](https://tailwindmail.dev/resources/how-to-build-responsive-html-emails): Build responsive HTML emails that remain readable in Gmail, Outlook, Apple Mail, and mobile inboxes using fluid tables, mobile-first CSS, and tested fallbacks.
- [How to Convert Tailwind CSS to Email-Safe HTML](https://tailwindmail.dev/resources/how-to-convert-tailwind-css-to-email-safe-html): Convert Tailwind CSS into inline, email-safe HTML with a repeatable pipeline for utility generation, table layouts, Outlook fallbacks, cleanup, and testing.
- [Tailwind CSS Email Templates: Examples, Components & How They Work](https://tailwindmail.dev/resources/tailwind-css-email-templates): Explore practical Tailwind CSS email templates, the components behind them, and the workflow that turns utility markup into inbox-ready HTML.
- [CSS Inlining in HTML Email: How It Works and Why It Matters](https://tailwindmail.dev/resources/css-inlining-in-html-email): Learn how email CSS inlining moves base styles onto elements, how cascade conflicts are resolved, which rules must stay embedded, and how to test the result.
- [How to Build Email Templates with JavaScript](https://tailwindmail.dev/resources/how-to-build-email-templates-with-javascript): Build maintainable email templates with JavaScript using components, typed data, HTML rendering, CSS inlining, plain-text output, and repeatable inbox tests.
- [How to Make Tailwind CSS Emails Work in Outlook](https://tailwindmail.dev/resources/how-to-make-tailwind-css-emails-work-in-outlook): Make Tailwind CSS emails work in Outlook by compiling utilities to inline styles, using table layouts, bulletproof buttons, explicit dimensions, and tested fall...
- [Why Tailwind CSS Doesn't Work Directly in Every Email Client](https://tailwindmail.dev/resources/why-tailwind-css-doesnt-work-directly-in-every-email-client): Tailwind CSS does not work directly in every email client because utility classes require generated CSS and inboxes sanitize and render that CSS differently.
- [How to Inline Tailwind CSS for HTML Emails](https://tailwindmail.dev/resources/how-to-inline-tailwind-css-for-html-emails): Inline Tailwind CSS for HTML email by generating used utilities, resolving modern values, preserving conditional rules, and merging declarations safely.
- [HTML Email Development in 2026: The Complete Developer Guide](https://tailwindmail.dev/resources/html-email-development-in-2026): A complete 2026 guide to HTML email development: architecture, table layouts, inline CSS, responsive design, accessibility, testing, delivery, and maintenance.
- [Responsive Tailwind CSS Emails: Breakpoints, Media Queries & Mobile Design](https://tailwindmail.dev/resources/responsive-tailwind-css-emails): Build responsive Tailwind emails with a mobile-first baseline, retained media queries, fluid images, stacking columns, and fallbacks for clients that strip CSS.
- [Tailwind CSS Email Compatibility: Gmail, Outlook & Apple Mail](https://tailwindmail.dev/resources/tailwind-css-email-compatibility): A practical Tailwind email compatibility reference for Gmail, Outlook, and Apple Mail, covering inline CSS, layout, media queries, dark mode, images, and fonts.
- [Tailwind CSS Email Components: Build a Reusable Email Design System](https://tailwindmail.dev/resources/tailwind-css-email-components): Turn repeated email patterns into dependable Tailwind components with clear inputs, email-safe output, and a maintainable design-token layer.
- [Tailwind CSS Email Development Workflow: From Tailwind Code to Production HTML](https://tailwindmail.dev/resources/tailwind-css-email-development-workflow): A repeatable Tailwind email workflow for components, compilation, CSS inlining, previews, client testing, size checks, and safe delivery.
- [Tailwind CSS Email Layouts: Tables vs Flexbox vs Grid](https://tailwindmail.dev/resources/tailwind-css-email-layouts-tables-vs-flexbox-vs-grid): Compare tables, Flexbox, and CSS Grid for Tailwind email layouts, including Outlook support, responsive behavior, accessibility, and compiler transformation.
- [Tailwind CSS Email Media Queries: What Works and What Doesn't](https://tailwindmail.dev/resources/tailwind-css-email-media-queries): Use mobile media queries in Tailwind emails without making the message depend on them, and understand which responsive patterns degrade safely.
- [Best Email Builders with HTML Export for Developers](https://tailwindmail.dev/resources/best-email-builders-with-html-export): Compare email builders that export portable HTML and learn how to judge output quality, source ownership, asset handling, collaboration, and provider independen...
- [React Email vs MJML vs TailwindMail: Different Approaches to Building HTML Email](https://tailwindmail.dev/resources/react-email-vs-mjml-vs-tailwindmail): Compare React Email, MJML, and TailwindMail by authoring model, styling, output, collaboration, framework fit, and the teams each approach serves best.
- [Tailwind CSS Email Dark Mode: Complete Developer Guide](https://tailwindmail.dev/resources/tailwind-css-email-dark-mode): Build Tailwind email dark mode with explicit light colors, tested dark variants, resilient logos, accessible contrast, and fallbacks for automatic client invers...
- [Tailwind CSS Email Buttons: How to Build Bulletproof CTA Buttons](https://tailwindmail.dev/resources/tailwind-css-email-buttons): Build Tailwind email buttons that survive Outlook using real links, table-backed padding, explicit colors, accessible labels, and tested mobile behavior.
- [Tailwind CSS Email Fonts: Web Fonts, Fallbacks & Outlook Compatibility](https://tailwindmail.dev/resources/tailwind-css-email-fonts): Choose email-safe font stacks, add web fonts progressively, and prevent Outlook or Gmail from breaking your Tailwind email typography.
- [Tailwind CSS Email Images: Responsive Images, Retina & Outlook Fixes](https://tailwindmail.dev/resources/tailwind-css-email-images): Build responsive, sharp, and accessible email images with dependable dimensions, retina assets, useful alt text, and Outlook-safe markup.
- [Tailwind CSS Email Width, Spacing & Container Best Practices](https://tailwindmail.dev/resources/tailwind-css-email-width-spacing-and-containers): Use reliable Tailwind email widths, containers, padding, gutters, and spacing tokens without creating overflow or Outlook layout problems.
- [Background Images in HTML Email: Tailwind, Gmail & Outlook Compatibility](https://tailwindmail.dev/resources/background-images-in-html-email): Add background images to HTML email with readable fallbacks, Tailwind-friendly source code, and VML support for desktop Outlook.
- [HTML Email Size Optimization: Avoid Gmail's 102KB Clipping Limit](https://tailwindmail.dev/resources/html-email-size-optimization-gmail-102kb): Reduce delivered HTML size, preserve tracking and personalization headroom, and stop Gmail from clipping the bottom of important emails.
- [HTML Email Testing: How to Test Gmail, Outlook, Apple Mail & Mobile](https://tailwindmail.dev/resources/html-email-testing): A practical HTML email testing process for content, links, accessibility, Gmail, Outlook, Apple Mail, mobile layouts, and final delivery output.

## Optional

- [Privacy Policy](https://tailwindmail.dev/privacy-policy)
- [Terms of Service](https://tailwindmail.dev/terms-of-service)
- [Cookie Policy](https://tailwindmail.dev/cookie-policy)
- [Refund Policy](https://tailwindmail.dev/refund-policy)
- [Sitemap](https://tailwindmail.dev/sitemap.xml): XML sitemap of public pages