search

maizzle / framework

Quickly build HTML emails with Tailwind CSS.
https://maizzle.com
MIT License
1.24k stars 49 forks source link

[Possible issue?] Spacing does not seem to work? #522

Closed yellow1912 closed 3 years ago

yellow1912 commented 3 years ago

When I use spacing, maizzle generates code like this:

<span style="--tw-space-x-reverse: 0; margin-right: calc(8px * var(--tw-space-x-reverse)); margin-left: calc(8px * calc(1 - var(--tw-space-x-reverse)));">

I'm not sure if that's the way it should be. It seems to uses variable and calc which dont work on most email clients?

cossssmin commented 3 years ago

Tailwind's space utilities will not work in email, because:

  1. They use CSS variables, which have very poor support
  2. They apply margin, which does not work in certain clients on certain elements (non-block/table level elements in Outlook on Windows, to be specific)

We don't disable them because you can use Maizzle as a static site generator if you'd like.

We provide some examples for spacing in the docs:

https://maizzle.com/docs/spacers

You can also safely use use margin utilities on block/table level elements.

Lots of stuff doesn't work (or has limited support) in email, so when using Maizzle you need to take that into account.

Also see https://www.caniemail.com

yellow1912 commented 3 years ago

Thank you very much for your help. I know you have put it in here (sort of): https://maizzle.com/docs/tailwindcss-config/ but I think in the future if you have the time it would be great to list the limitation. Or perhaps have a "strict-email" config that support only email-compatible classes?

cossssmin commented 3 years ago

Hmm, being able to opt-in for a strict Tailwind config doesn't sound bad at all, I'll look into it (edit: though even this would need maintaining, so we'll have to see).

Listing limitations isn't feasible, there are so many possible scenarios that are constantly changing.

yellow1912 commented 3 years ago

I see what you mean, is there a service that you recommend to use to test the emails before sending out? I wonder how other frameworks handle this? I know they use their own components so perhaps by limiting what people can do they reduce the possible issues?

I'm very interested in your https://mailviews.com/ when it's available. Are the templates fully checked on all clients?

cossssmin commented 3 years ago

Testing: I personally use emailonacid.com, but there's also the pricier litmus.com, or the newer testi.at

Other frameworks provide you with prebuilt components that you have very little control over. Maizzle will always give you full freedom, but you do need to know how to code emails.

Mailviews components and templates will be all render tested in the most popular email clients, of course 👍