Question 1

How do I convert CSS Flexbox to HTML tables for Outlook email?

Accepted Answer

The Retrofit transpiler accepts your modern HTML markup using CSS flexbox or grid and recursively converts it into nested HTML table code that Outlook 2013–2024 renders correctly. It analyzes each flex container and generates a matching table wrapper, converts flex items into td columns with proportional widths, translates CSS gap into cellspacing and cellpadding, preserves your background colors and padding, and injects <!--[if mso]> conditional comments around the table code so only Outlook sees the table structure while other clients continue using the original flexbox layout. The output is a single unified HTML file with both versions coexisting via conditional comments.

Question 2

Why does flexbox not work in Outlook email?

Accepted Answer

Outlook 2013, 2016, 2019, 2021, and the desktop version of Outlook 365 for Windows use Microsoft Word's rendering engine (mso.dll) rather than a web browser engine like Chromium or WebKit. The Word renderer was designed for document layout, not web standards. It does not support CSS flexbox, CSS grid, CSS position, CSS animations, CSS variables, CSS background-image, or most modern CSS layout properties. When Outlook encounters a flex container, it simply ignores the display: flex property and collapses all flex items into a vertical single-column stack. Retrofit solves this by generating nested HTML tables — the only layout system the Word engine fully supports.

Question 3

What is the difference between Retrofit and MJML?

Accepted Answer

MJML is a markup language where you write in MJML syntax (custom XML tags like mj-section, mj-column) and it compiles to HTML tables. You need to learn MJML's proprietary tag system and rewrite your templates in it. Retrofit works the opposite way: you write normal HTML with standard div and flexbox, then Retrofit transpiles it to tables. This means you can use any existing HTML email template or framework output and run it through Retrofit without rewriting it. Retrofit is also useful for one-off fixes to legacy templates that cannot be fully rebuilt in MJML.

Question 4

Does Retrofit work with Tailwind CSS email templates?

Accepted Answer

Yes — Retrofit processes the compiled CSS output rather than Tailwind class names. The recommended workflow is: (1) build your email template with Tailwind CSS and run the Tailwind CLI to generate the compiled CSS, (2) run the compiled HTML through RenderOps CSS Inliner to move all Tailwind utilities into inline style attributes, then (3) paste the inlined HTML into Retrofit to convert flexbox to tables. This three-step pipeline produces Outlook-safe HTML from any Tailwind email template.

Question 5

Does Retrofit support multi-column email layouts?

Accepted Answer

Yes — Retrofit handles multi-column layouts by converting flex rows with multiple flex children into HTML tables with matching td column counts. flex: 1 children get equal percentage widths. Explicit width values are preserved. Nested flex containers (columns inside columns) are converted to nested tables. Gap values between columns are approximated using cell padding. The converter also handles flex-wrap by creating additional table rows for wrapped content.

Question 6

Will Retrofit break my responsive email design?

Accepted Answer

No — Retrofit is designed to preserve your @media query breakpoints. The table conversion targets the desktop layout (what Outlook sees via MSO conditional comments), while mobile clients that support @media queries can still use your responsive CSS rules to stack columns on small screens. Retrofit only wraps the desktop layout in table code; your mobile-first responsive CSS is passed through unchanged.

HTML Email Table Converter