You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
|`<Preheader>`| Hidden preview text shown in inbox list view |
136
136
@@ -146,11 +146,14 @@ All built-in components are auto-imported, no import statements needed. See `ref
146
146
147
147
| Component | Description |
148
148
|-----------|-------------|
149
+
|`<Font>`| Adds a Google Font (or custom font) via `<link>` + `@font-face`, with email-safe fallbacks |
150
+
|`<Tailwind>`| Scopes a Tailwind/CSS block to its slot — per-template styles or scoped overrides |
149
151
|`<WithUrl>`| Rewrites URLs in children — prepend base URL or append query params (UTM tracking) |
150
152
|`<NoWidows>`| Replaces last space with ` ` to prevent orphaned words |
151
153
|`<Outlook>`| Wraps content in Outlook conditional comments (shows only in Outlook) |
152
154
|`<NotOutlook>`| Hides content from Outlook |
153
155
|`<Vml>`| VML markup for Outlook-specific rendering (background images) |
156
+
|`<Raw>`| Emits slot content verbatim — bypasses Vue compilation so `{{ }}` and ESP syntax pass through |
154
157
155
158
## Behavioral guidelines
156
159
@@ -180,6 +183,7 @@ If the user hasn't specified, ask about:
180
183
### Common mistakes to avoid
181
184
182
185
- Do not use `<div>` directly for layout structure. Use the `<Container>`, `<Section>`, `<Row>` and `<Column>` components, which render email-safe markup.
186
+
- Prefer `<Spacer>` over vertical margins for spacing between block elements — Outlook ignores margins on many elements. Margins are fine on text elements (`<p>`, `<Text>`, headings).
183
187
- Do not use CSS `flexbox` or `grid` for layouts — poor email client support. `display:flex` can be used for simple horizontal alignment in some cases, but tables are always more reliable.
184
188
- Do not use `position: absolute/relative` — not supported in most email clients.
185
189
- Do not use custom fonts without a web-safe fallback. Most email clients ignore `@font-face`.
0 commit comments