Email Template Design

Overview

Notify email templates support dynamic content insertion and are styled using Tailwind CSS. This allows you to create responsive, customizable email templates that maintain consistent styling across email clients.

Dynamic Values

Templates support dynamic value insertion using single curly braces:

<h1>Hello {name}!</h1>
<p>Your order #{order_id} has shipped.</p>

Common dynamic fields:

  • {name} - Recipient's name
  • {email} - Recipient's email address
  • Custom variables passed in your API request

Styling with Tailwind CSS

Templates use Tailwind CSS for styling. This provides:

  • Responsive design utilities
  • Cross-client compatibility
  • Consistent rendering

Example template with Tailwind styling:

<div class="max-w-2xl mx-auto p-4">
  <h1 class="text-2xl font-bold mb-4">Welcome {name}!</h1>
  <p class="text-gray-700 mb-4">
    Thanks for signing up. Your account is now active.
  </p>
  <a href="{{login_url}}" class="bg-blue-500 text-white px-4 py-2 rounded">
    Get Started
  </a>
</div>

Best Practices

  1. Mobile Responsiveness

    • Use responsive Tailwind classes
    • Test on multiple screen sizes
    • Keep layouts simple and flexible

  2. Email Client Compatibility

    • Stick to widely-supported HTML/CSS
    • Test across major email clients
    • Use inline styles for critical elements

  3. Dynamic Content

    • Always provide fallback values
    • Validate dynamic content length
    • Test with various data scenarios

  4. Performance

    • Optimize images
    • Minimize CSS usage
    • Keep templates lightweight

Template Structure

Basic template structure:

<div class="email-container max-w-2xl mx-auto">
  <!-- Header -->
  <header class="bg-gray-100 p-4">
    <img src="{company_logo}" alt="Logo" class="h-8" />
  </header>

  <!-- Content -->
  <main class="p-4">
    <h1 class="text-xl font-bold">{subject}</h1>
    <div class="content mt-4">{content}</div>
  </main>

  <!-- Footer -->
  <footer class="text-sm text-gray-500 p-4">
    © {current_year} {company_name}
  </footer>
</div>

For more information about Tailwind CSS utilities, visit the Tailwind CSS documentation.