search

maizzle / framework

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

Maizzle api render html contains css variable #1120

Closed ches4117 closed 10 months ago

ches4117 commented 10 months ago

Hello, when I use Maizzle api to render HTML having tailwind css, the generated html having css variables like below example.

<html>
  <head>
    <style>
      .space-x-2 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse));
      }
      .text-stone-500 {
        --tw-text-opacity: 1;
        color: rgb(120 113 108 / var(--tw-text-opacity));
      }
    </style>
  <style>
<head>
<body>
  <div class="space-x-2 text-stone-500" />
</body>
</html>

This style will not render successfully in Gmail.

cossssmin commented 10 months ago

You need to provide it with a config (otherwise it will use the default one).

You can use the one we have in the Starter:

https://github.com/maizzle/maizzle/blob/master/tailwind.config.js

Some utilities, like space-x or divide-y won't work in email, because they use complex selectors and CSS properties that most email clients don't support. In those cases it's better to just use margin/padding or a spacer/divider component.