HTML, CSS, and Tailwind

Style email templates with Tailwind classes and a project theme, using the supported HTML elements and email components for layout.

Write content as ordinary HTML and style it with Tailwind classes. The compiler generates the classes a template uses from the project's theme.css, applies cascade and specificity, inlines the declarations, and retains supported head and media rules. Inline styles keep normal precedence. Class names must be literal so the compiler can see them, and a name built at run time fails with the dynamic-class diagnostic.

The project theme, theme.css, layers in order: the starter's stylesheet, then @import "samva:brand";, then the project's own @theme overrides. A brand edit reaches every template at its next publish.

Use email components for table layouts and Outlook fallbacks. General flex or grid layouts are not automatically translated to email tables, and a compatibility finding names the clients that ignore a property. Browser previews do not prove rendering in every email client.

Supported HTML

These elements come from the table shared by the JSX types and HTML serializer:

a, article, b, blockquote, body, br, caption, center, code, col, colgroup, div, em, footer, h1, h2, h3, h4, h5, h6, head, header, hr, html, i, img, li, main, meta, ol, p, pre, s, section, small, span, strong, style, table, tbody, td, tfoot, th, thead, title, tr, u, ul.

An element or attribute outside the table fails at compile time with its location, not in the recipient's inbox. See responsive and dark styles and diagnostics.

Related documentation

On this page