How to Make Tailwind CSS Emails Work in Outlook

To make a Tailwind CSS email work in Outlook, compile utility classes into concrete inline styles, use presentation tables for critical layout, add HTML attributes as fallbacks, and replace fragile components with Outlook-safe patterns.

Do not send raw Tailwind markup. Outlook does not know what bg-blue-600 means, and some Outlook versions support far less CSS than a modern browser.

Why Outlook is different

“Outlook” describes several products and rendering engines. Outlook on the web and newer experiences can behave differently from classic desktop versions that rely on Microsoft Word for HTML rendering.

That older engine is the source of familiar limitations around:

• Flexbox and Grid;
• margins;
• background images;
• rounded corners;
• max-width;
• line height;
• animated media; and
• modern selectors and CSS values.

Build a strong table-based baseline, then treat modern styling as enhancement.

Compile Tailwind before sending

Source:

<a class="inline-block rounded-lg bg-blue-600 px-6 py-3 font-semibold text-white">
  View invoice
</a>

Outlook needs output with explicit declarations and a defensive structure. An email-aware compiler should resolve the color, spacing, type, and button shape before delivery.

Read how to convert Tailwind to email-safe HTML.

Use tables for important layout

Do not make a critical two-column layout depend on Flexbox or Grid.

<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50%" valign="top" style="padding-right:12px">...</td>
    <td width="50%" valign="top" style="padding-left:12px">...</td>
  </tr>
</table>

Include explicit widths and vertical alignment. If columns stack on mobile, keep a logical source order and use a small tested media query.

The email layout comparison covers safe transformations.

Build bulletproof buttons

A styled link may lose padding or background behavior in classic Outlook. A table-backed button gives the background and padding to a table cell:

<table role="presentation" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" bgcolor="#155dfc"
        style="border-radius:8px;padding:12px 24px">
      <a href="https://example.com/invoice"
         style="display:inline-block;color:#ffffff;font-weight:600;text-decoration:none">
        View invoice
      </a>
    </td>
  </tr>
</table>

Keep the label descriptive and include a plain URL fallback when the action is critical. See Tailwind bulletproof email buttons.

Add presentational attributes

Inline CSS is primary, but old HTML attributes provide useful fallbacks:

• width on tables and images;
• height on spacers and images;
• align and valign on cells;
• bgcolor for key backgrounds; and
• role="presentation" for layout tables.

<td width="600" align="center" bgcolor="#ffffff"
    style="width:100%;max-width:600px;background:#ffffff">

These attributes are not a replacement for CSS; they reinforce high-value properties.

Use explicit image dimensions

<img
  src="https://example.com/hero.jpg"
  width="600"
  alt="Dashboard showing the completed migration"
  style="display:block;width:100%;max-width:600px;height:auto;border:0"
>

Do not depend on object-fit for essential crops. Prepare images at the intended aspect ratio.

Outlook may also expose a small download or security treatment around images. Keep the message readable with images blocked.

Handle background images with VML

CSS background images are not dependable across Outlook versions. When the design requires one, provide a solid bgcolor fallback and a conditional VML block for classic Outlook.

Only use this complexity for high-value sections. Live text over a flat background is far easier to maintain.

The full pattern is in background images in HTML email.

Use fallback fonts

Outlook may ignore a web font and choose its own fallback if the stack is incomplete.

<td style="font-family:Arial,'Helvetica Neue',Helvetica,sans-serif">

Choose fallbacks with similar proportions, then test line wraps and button widths. Read email font fallbacks and Outlook compatibility.

Prefer padding over fragile margins

Margins on some elements can behave unexpectedly, especially when a web layout is translated directly.

Use table-cell padding for major section spacing. Reset heading and paragraph margins explicitly, then add spacing with a predictable inline value or a dedicated spacer row.

Do not create spacing with empty paragraphs or repeated <br> tags.

Use conditional comments deliberately

Microsoft conditional comments can provide markup or CSS only to classic Outlook:

<!--[if mso]>
  <table role="presentation" width="600"><tr><td>
<![endif]-->

  <!-- shared content -->

<!--[if mso]>
  </td></tr></table>
<![endif]-->

Keep these patterns inside tested components. Scattering one-off comments through every template makes maintenance difficult.

Tailwind utilities to treat carefully

Expect fallbacks or reduced fidelity for:

• flex, grid, and gap;
• rounded-*;
• shadow-*;
• max-w-* without an HTML width fallback;
• background-image utilities;
• arbitrary modern color values;
• absolute positioning; and
• dark-mode variants.

Your compiler may translate some of these. Verify the final HTML rather than assuming the utility name implies support.

Outlook testing checklist

• test classic desktop Outlook when relevant;
• test Outlook on the web;
• test the current Outlook application used by your organization;
• verify columns, buttons, and background colors;
• inspect font fallbacks and line wraps;
• check image scaling and blocked-image mode;
• click every action;
• test at Windows display scaling used by your audience; and
• compare the delivered source with the export.

Use the complete HTML email testing guide for the wider matrix.

Common Outlook failures

The container is too wide

Add an explicit table width for Outlook and fluid CSS for other clients.

Button background disappears

Use a table-backed button or a proven VML button when rounded shape must be exact.

Columns collapse

The production markup still relies on Flexbox or Grid. Convert the structure to table cells.

Background image disappears

Add a solid fallback and VML where the image is essential.

Font changes and text wraps

Provide a complete fallback stack and test with the actual fallback, not only the web font.

Frequently asked questions

Does Outlook support Tailwind CSS?

Outlook can render supported CSS generated from Tailwind after compilation. It does not understand raw utility names.

Do I need VML for every email?

No. VML is mainly useful for classic Outlook background images and certain exact button treatments. Prefer simpler HTML when possible.

Can I use rounded corners?

Use them as progressive enhancement. Some Outlook versions may show square corners unless you add a more complex fallback.

Are tables required?

They remain the safest choice for critical multi-column layout and buttons in Outlook.

Can a compiler fix every Outlook issue?

No. It can automate known patterns, but content combinations and client versions still need testing.

Build the Outlook baseline first

Outlook compatibility is easiest when it is part of the component design, not a final patch.

Compile Tailwind into explicit styles, use tables where structure matters, add simple fallbacks, and isolate conditional code inside shared components. Then test the exact export in the Outlook environments your audience actually uses.