email-theme-styling

SKILL.md

Purpose 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.

Magento splits email CSS into two files because email clients like Gmail strip tags:

| email-inline.css (from email-inline.less) | Styles that CAN be inlined | {{inlinecss file="css/email-inline.css"}} | Emogrifier converts to style="" attributes | | email.css (from email.less) | Styles that CANNOT be inlined | {{css file="css/email.css"}} | Placed in tag (media queries, :hover, @font-face) |

Comprehensive guide for theming and styling Magento 2 transactional emails via theme files, including Hyvä-specific considerations, CSS inlining architecture, and template override patterns. Source: proxiblue/claude-skills.

View raw