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
Email components
Write content in ordinary HTML and use email components only where a client needs table layout, button fallbacks, or required alt text.
Responsive and dark styles
Author responsive and dark email styles with Tailwind variants while keeping baseline content usable and reviewing compatibility findings.