Tabellen-Layout statt Flexbox und Grid
E-Mail-Clients rendern kein modernes CSS, Outlook nutzt teilweise die Word-Rendering-Engine, und Flexbox oder Grid funktionieren dort schlicht nicht zuverlässig. Wer Tailwind-Utility-Klassen konsequent auf Tabellen-Layout überträgt, kann trotzdem konsistente, wartbare HTML-E-Mail-Templates bauen, ohne bei jedem Newsletter von vorne anzufangen.
Inhaltsverzeichnis
- 1. Warum E-Mail-HTML anders funktioniert als Webseiten-HTML
- 2. Das Tabellen-Layout-Fundament für Tailwind E-Mail-Templates
- 3. Utility-Klassen, die in E-Mail-Clients tatsächlich funktionieren
- 4. Ein komplettes Tailwind E-Mail-Template Schritt für Schritt
- 5. Verschachtelte Tabellen für responsive Spalten
- 6. Bulletproof Buttons mit Tailwind-Klassen
- 7. Bilder, Fallback-Farben und MSO-Conditional-Comments
- 8. Build-Workflow: Tailwind-Config für E-Mail einrichten
- 9. Tailwind E-Mail-Templates im Vergleich
- 10. Zusammenfassung
- 11. FAQ
1. Warum E-Mail-HTML anders funktioniert als Webseiten-HTML
Wer zum ersten Mal ein Tailwind E-Mail-Template baut, erwartet meist, dass die gewohnten Utility-Klassen aus dem Webprojekt einfach übernommen werden können. Die Realität sieht anders aus: Outlook Desktop rendert HTML-E-Mails seit Jahren über die Word-Rendering-Engine, nicht über einen echten Browser-Renderer. Das bedeutet, dass Flexbox, Grid, viele moderne Selektoren und ein großer Teil von CSS3 dort schlicht ignoriert oder fehlerhaft interpretiert werden. Gmail entfernt zusätzlich `
Ihre spezialisierte Magento 2 Agentur für Hyvä Theme, Webdesign und SEO. Wir machen Ihren Shop schneller, schöner und besser gefunden.
Adobe Certified Expert
Adobe Commerce Front End DeveloperVladimir Mironjuk, seit 2023