This skill provides comprehensive guidance on theming and styling Magento 2 transactional emails via theme files. It covers the full email rendering pipeline, CSS inlining architecture, template override patterns, Hyvä Email module integration, and the Tailwind-to-LESS compilation approach.

• Customizing the look and feel of transactional emails (order confirmation, account creation, etc.)
• Overriding email header/footer templates via the theme
• Adding custom CSS styles to emails
• Setting up a custom email logo
• Debugging email rendering or CSS inlining issues
• Understanding how Hyvä interacts with the email system
• Using Tailwind CSS as a source for email styles

---

Email Rendering Pipeline

```

1. Module defines template in email_templates.xml (e.g. sales_email_order_template)

↓

1. TransportBuilder triggers template rendering

↓

1. AbstractTemplate::getProcessedTemplate()

- applyDesignConfig() → emulates store/theme context

- addEmailVariables() → populates store data, template_styles

↓

1. Filter->filter(templateText) processes directives:

- {{template config_path="design/email/header_template"}} → includes header

- {{template config_path="design/email/footer_template"}} → includes footer

- {{css file="css/email.css"}} → outputs CSS in

{{inlinecss file="css/email-inline.css"}}

```

The `template_styles` Variable

Each email template can declare per-template styles in a comment block at the top:

```html

```

These are injected into the ' | head -5

```

What to look for:

• style="" attributes on , ,

  , , , - elements confirm inlining is working