Has anyone figured out how to style Emails with TailwindCSS on Phoenix 1.6?

Phoenix Forum Questions / Help
, , ,
1

I am currently sending text-based emails but would like to send proper brand based emails with Phoenix. I already have TailwindCSS setup, but would like to style my emails using the same.

Has anyone figured out how to do this? Or if that’s such a bad idea, what alternatives do you use ?

2

html emails is a very fine art (you need to support 90+ clients and inline styles etc etc)…

I suggest using mjml https://mjml.io - elixir library: GitHub - adoptoposs/mjml_nif: Elixir NIF bindings for the MJML Rust implementation (mrml)

edit: there seems to be https://maizzle.com for tailwind emails - mjml is certainly the tested and trusted way - no idea if maizzle works…

8 Likes
3

I played around with maizzle and it works (not sure if some edge cases etc. Just played with it)

4

Maizzle doesn’t include markup abstractions that expand to table-based structures, such as <row> or <column> in other frameworks.

You code your emails the way you want to with HTML you already know, there’s no need to learn new tags or attributes.

Knowing that some email clients still need layouts coded with tables in order to ensure proper rendering, this might sound terrifying to some. However, depending on your audience, nowadays you can actually use modern HTML and CSS and have your layout look great in the majority of email clients.
Introduction | Maizzle

majority of email clients - so maizzle is not useable if you want html emails that “just work”… so I would recommend going with mjml: Crafting Beautiful Emails in Elixir Using MJML-Alex Koutmos | Engineering Blog

3 Likes
5

Unfortunately, email clients haven’t caught up with web standards.

Instead of building the emails manually, you can also build a template with a visual tool (most of them are built on top of mjml) and then put placeholders in the generated HTML:

and probably more.

3 Likes
6

I might be missing something (has something substantially changed in that matter with 1.6?) but in 1.5 I went the same route I used countless times on Rails => an e-mail layout and templates (both html and text) rendered into e-mail message the way you see fit. But I rarely do extensive styling on e-mail messages. Usually only small, inline touch-ups here or there. With TailwindCSS, the issue is with how you want to provide the “TailwindCSS” actual CSS. Putting a CDN link in the <HEAD> my not work well… There is this old article:

which I think is still mostly valid today. IOW – unless you have a well-working automating tool at hand that could inline definitions of all Tailwind’s utility classes for you, you’re most probably better off with an external template builder as others suggested.

7

That page is taken over.

8

Wayback link: