HTML Email Guides
Guides and notes on using Tailwind CSS for HTML emails from markup patterns to client quirks.
30 articles
Tailwind
Tailwind CSS Email Fonts: Web Fonts, Fallbacks & Outlook Compatibility
Choose email-safe font stacks, add web fonts progressively, and prevent Outlook or Gmail from breaking your Tailwind email typography.
Tailwind
Tailwind CSS Email Images: Responsive Images, Retina & Outlook Fixes
Build responsive, sharp, and accessible email images with dependable dimensions, retina assets, useful alt text, and Outlook-safe markup.
Tailwind
Tailwind CSS Email Width, Spacing & Container Best Practices
Use reliable Tailwind email widths, containers, padding, gutters, and spacing tokens without creating overflow or Outlook layout problems.
HTML email
Background Images in HTML Email: Tailwind, Gmail & Outlook Compatibility
Add background images to HTML email with readable fallbacks, Tailwind-friendly source code, and VML support for desktop Outlook.
Performance
HTML Email Size Optimization: Avoid Gmail's 102KB Clipping Limit
Reduce delivered HTML size, preserve tracking and personalization headroom, and stop Gmail from clipping the bottom of important emails.
Testing
HTML Email Testing: How to Test Gmail, Outlook, Apple Mail & Mobile
A practical HTML email testing process for content, links, accessibility, Gmail, Outlook, Apple Mail, mobile layouts, and final delivery output.
Ready to ship email-safe HTML?
Start with Tailwind markup, compile to clean HTML, and always preview or send a test before campaigns.