email-theme-styling_skill

This skill helps you theme Magento 2 transactional emails by guiding header/footer overrides, inlining, and Hyvä integration for consistent branding.

7

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill proxiblue/claude-skills --skill email-theme-styling

SKILL.md27.3 KB

Overview

This skill is a practical guide for theming and styling Magento 2 transactional emails using theme files. It explains the email rendering pipeline, the two-file CSS inlining strategy, Hyvä-specific adjustments, and Tailwind-to-LESS integration. The goal is predictable, editable email output across clients while preserving Magento's fallback and override mechanics.

How this skill works

It inspects the Magento email rendering flow: template resolution, design emulation, template variables, and the Filter stage that resolves directives (header/footer, css, inlinecss, layout blocks). CSS is split into email.css (non-inlinable rules) and email-inline.css (rules passed to Emogrifier for conversion to inline style attributes). Hyvä Email supplies LESS fallbacks so email LESS files are found even when the frontend uses Tailwind. A recommended Tailwind→LESS build step converts utilities into LESS-friendly CSS for deployment.

When to use it

When customizing transactional email header, footer, or per-email templates
When adding brand styles or a custom email logo via theme files
When debugging CSS inlining or email rendering issues
When integrating Hyvä themes and needing email LESS fallbacks
When using Tailwind utilities as a source for email styles to compile into LESS

Best practices

Prefer variable overrides (_email-variables.less) for color/spacing changes to keep upgrades safe
Add theme-specific rules in _email-extend.less rather than copying _email-base.less
Use the two-file approach: email-inline.less for rules you intend to inline and email.less for media queries and @font-face
Keep per-template styles in  blocks for template-specific tweaks
When using Tailwind, disable opacity plugins and build to web/css/source/_theme.less so Magento’s LESS processor can consume output

Example use cases

Override header.html and footer.html in your theme to add branding and structural changes
Create web/css/source/_email-variables.less to set brand colors and button defaults site-wide
Add an email logo at app/design/.../web/logo_email.png and reference it in templates
Use a PostCSS/Tailwind build to author utilities, compile them to a LESS file, then deploy static content
Copy module email templates into your theme to tailor order, invoice, and shipment layouts

FAQ

Place it in email-inline.less (or in your _email-extend.less outside .email-non-inline() mixins) so Emogrifier receives it and converts it to inline style attributes.

Does Hyvä Email use Tailwind for emails?

No. Hyvä Email provides LESS fallback files so Magento’s existing LESS-based email build and Emogrifier pipeline still work. You can author styles with Tailwind but must compile output into LESS/CSS compatible with Magento’s processor.