How do I use `tailwindcss/typography` with Maizzle? #1240

cowboycodr · 2024-04-09T15:57:07Z

cowboycodr
Apr 9, 2024

The documentation previously states that it is possible (but not recommended) except it doesn't explain how. Could someone please show me how?

https://maizzle.com/guides/markdown-emails#tailwindcsstypography

cossssmin · 2024-04-09T18:01:43Z

cossssmin
Apr 9, 2024
Maintainer

Just install it and add it like any other plugin in your tailwind.config.js, you can then use the classes it generates.

CSS inlining and other transformers in Maizzle may screw it up though. Email clients also don't support the CSS it produces, that's why we have the warning.

1 reply

cowboycodr Apr 9, 2024
Author

That's what I have done. Except when I build it for production, it just produces invalid HTML
& CSS.

<!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" class="bg-white text-primary" style="background-color: rgb(255 255 255 / 1); color: hsl(222.2 47.4% 11.2% / 1)">
<head>
  <meta charset="utf-8">
  <meta name="x-apple-disable-message-reformatting">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <!--[if mso]>
  <noscript>
    <xml>
      <o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
  </noscript>
  <style>
    td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
  </style>
  <![endif]-->
  <style>
    img {
      max-width: 100%;
      vertical-align: middle;
      line-height: 1;
    }
    [class ~ ="not-prose"] *)) {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }
    [class ~ ="not-prose"] *)) {
      color: var(--tw-prose-lead);
      font-size: 1.25em;
      line-height: 1.6;
      margin-top: 1.2em;
      margin-bottom: 1.2em;
    }
    [class ~ ="not-prose"] *)) {
      color: var(--tw-prose-links);
      text-decoration: underline;
      font-weight: 500;
    }
    [class ~ ="not-prose"] *)) {
      color: var(--tw-prose-bold);
      font-weight: 600;
    }
    [class ~ ="not-prose"] *)) {
      color: inherit;
    }
    [class ~ ="not-prose"] *)) {
      color: inherit;
    }
    [class ~ ="not-prose"] *)) {
      color: inherit;
    }
    [class ~ ="not-prose"] *)) {
      list-style-type: decimal;
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      padding-inline-start: 1.625em;
    }
    [class ~ ="not-prose"] *)) {
      list-style-type: upper-alpha;
    }
    [class ~ ="not-prose"] *)) {
      list-style-type: lower-alpha;
    }
    [class ~ ="not-prose"] *)) {
      list-style-type: upper-alpha;
    }
    [class ~ ="not-prose"] *)) {
      list-style-type: lower-alpha;
    }
    [class ~ ="not-prose"] *)) {
      list-style-type: upper-roman;
    }
    [class ~ ="not-prose"] *)) {
      list-style-type: lower-roman;
    }
    [class ~ ="not-prose"] *)) {
      list-style-type: upper-roman;
    }
    [class ~ ="not-prose"] *)) {
      list-style-type: lower-roman;
    }
    [class ~ ="not-prose"] *)) {
      list-style-type: decimal;
    }
    [class ~ ="not-prose"] *)) {
      list-style-type: disc;
      margin-top: 1.25em;
      margin-bottom: 1.25em;
      padding-inline-start: 1.625em;
    }
    [class ~ ="not-prose"] *))::marker {
      font-weight: 400;
      color: var(--tw-prose-counters);
    }
    [class ~ ="not-prose"] *))::marker {
      color: var(--tw-prose-bullets);
    }
    [class ~ ="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      margin-top: 1.25em;
    }
    [class ~ ="not-prose"] *)) {
      border-color: var(--tw-prose-hr);
      border-top-width: 1px;
      margin-top: 3em;
      margin-bottom: 3em;
    }
    [class ~ ="not-prose"] *)) {
      font-weight: 500;
      font-style: italic;
      color: var(--tw-prose-quotes);
      border-inline-start-width: 0.25rem;
      border-inline-start-color: var(--tw-prose-quote-borders);
      quotes: "\201C" "\201D" "\2018" "\2019";
      margin-top: 1.6em;
      margin-bottom: 1.6em;
      padding-inline-start: 1em;
    }
    [class ~ ="not-prose"] *))::before {
      content: open-quote;
    }
    [class ~ ="not-prose"] *))::after {
      content: close-quote;
    }
    [class ~ ="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 800;
      font-size: 2.25em;
      margin-top: 0;
      margin-bottom: 0.8888889em;
      line-height: 1.1111111;
    }
    [class ~ ="not-prose"] *)) {
      font-weight: 900;
      color: inherit;
    }
    [class ~ ="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 700;
      font-size: 1.5em;
      margin-top: 2em;
      margin-bottom: 1em;
      line-height: 1.3333333;
    }
    [class ~ ="not-prose"] *)) {
      font-weight: 800;
      color: inherit;
    }
    [class ~ ="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      font-size: 1.25em;
      margin-top: 1.6em;
      margin-bottom: 0.6em;
      line-height: 1.6;
    }
    [class ~ ="not-prose"] *)) {
      font-weight: 700;
      color: inherit;
    }
    [class ~ ="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      margin-top: 1.5em;
      margin-bottom: 0.5em;
      line-height: 1.5;
    }
    [class ~ ="not-prose"] *)) {
      font-weight: 700;
      color: inherit;
    }
    [class ~ ="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    [class ~ ="not-prose"] *)) {
      display: block;
      margin-top: 2em;
      margin-bottom: 2em;
    }
    [class ~ ="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    [class ~ ="not-prose"] *)) {
      font-weight: 500;
      font-family: inherit;
      color: var(--tw-prose-kbd);
      box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
      font-size: 0.875em;
      border-radius: 0.3125rem;
      padding-top: 0.1875em;
      padding-inline-end: 0.375em;
      padding-bottom: 0.1875em;
      padding-inline-start: 0.375em;
    }
    [class ~ ="not-prose"] *)) {
      color: var(--tw-prose-code);
      font-weight: 600;
      font-size: 0.875em;
    }
    [class ~ ="not-prose"] *))::before {
      content: "`";
    }
    [class ~ ="not-prose"] *))::after {
      content: "`";
    }
    [class ~ ="not-prose"] *)) {
      color: inherit;
    }
    [class ~ ="not-prose"] *)) {
      color: inherit;
    }
    [class ~ ="not-prose"] *)) {
      color: inherit;
      font-size: 0.875em;
    }
    [class ~ ="not-prose"] *)) {
      color: inherit;
      font-size: 0.9em;
    }
    [class ~ ="not-prose"] *)) {
      color: inherit;
    }
    [class ~ ="not-prose"] *)) {
      color: inherit;
    }
    [class ~ ="not-prose"] *)) {
      color: inherit;
    }
    [class ~ ="not-prose"] *)) {
      color: var(--tw-prose-pre-code);
      background-color: var(--tw-prose-pre-bg);
      overflow-x: auto;
      font-weight: 400;
      font-size: 0.875em;
      line-height: 1.7142857;
      margin-top: 1.7142857em;
      margin-bottom: 1.7142857em;
      border-radius: 0.375rem;
      padding-top: 0.8571429em;
      padding-inline-end: 1.1428571em;
      padding-bottom: 0.8571429em;
      padding-inline-start: 1.1428571em;
    }
    [class ~ ="not-prose"] *)) {
      background-color: transparent;
      border-width: 0;
      border-radius: 0;
      padding: 0;
      font-weight: inherit;
      color: inherit;
      font-size: inherit;
      font-family: inherit;
      line-height: inherit;
    }
    [class ~ ="not-prose"] *))::before {
      content: none;
    }
    [class ~ ="not-prose"] *))::after {
      content: none;
    }
    [class ~ ="not-prose"] *)) {
      width: 100%;
      table-layout: auto;
      text-align: start;
      margin-top: 2em;
      margin-bottom: 2em;
      font-size: 0.875em;
      line-height: 1.7142857;
    }
    [class ~ ="not-prose"] *)) {
      border-bottom-width: 1px;
      border-bottom-color: var(--tw-prose-th-borders);
    }
    [class ~ ="not-prose"] *)) {
      color: var(--tw-prose-headings);
      font-weight: 600;
      vertical-align: bottom;
      padding-inline-end: 0.5714286em;
      padding-bottom: 0.5714286em;
      padding-inline-start: 0.5714286em;
    }
    .prose :where(tbody tr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      border-bottom-width: 1px;
      border-bottom-color: var(--tw-prose-td-borders);
    }
    .prose :where(tbody tr:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      border-bottom-width: 0;
    }
    .prose :where(tbody td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      vertical-align: baseline;
    }
    [class ~ ="not-prose"] *)) {
      border-top-width: 1px;
      border-top-color: var(--tw-prose-th-borders);
    }
    [class ~ ="not-prose"] *)) {
      vertical-align: top;
    }
    [class ~ ="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    [class ~ ="not-prose"] *)) {
      color: var(--tw-prose-captions);
      font-size: 0.875em;
      line-height: 1.4285714;
      margin-top: 0.8571429em;
    }
    [class ~ ="not-prose"] *)) {
      margin-top: 0;
      margin-bottom: 0;
    }
    [class ~ ="not-prose"] *)) {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
    }
    [class ~ ="not-prose"] *)) {
      padding-inline-start: 0.375em;
    }
    [class ~ ="not-prose"] *)) {
      padding-inline-start: 0.375em;
    }
    [class ~ ="not-prose"] *)) {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }
    [class ~ ="not-prose"] *)) {
      margin-top: 1.25em;
    }
    [class ~ ="not-prose"] *)) {
      margin-bottom: 1.25em;
    }
    [class ~ ="not-prose"] *)) {
      margin-top: 1.25em;
    }
    [class ~ ="not-prose"] *)) {
      margin-bottom: 1.25em;
    }
    ul ol,
    ol ul,
    ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      margin-top: 0.75em;
      margin-bottom: 0.75em;
    }
    [class ~ ="not-prose"] *)) {
      margin-top: 1.25em;
      margin-bottom: 1.25em;
    }
    [class ~ ="not-prose"] *)) {
      margin-top: 0.5em;
      padding-inline-start: 1.625em;
    }
    [class ~ ="not-prose"] *)) {
      margin-top: 0;
    }
    [class ~ ="not-prose"] *)) {
      margin-top: 0;
    }
    [class ~ ="not-prose"] *)) {
      margin-top: 0;
    }
    [class ~ ="not-prose"] *)) {
      margin-top: 0;
    }
    [class ~ ="not-prose"] *)) {
      padding-inline-start: 0;
    }
    [class ~ ="not-prose"] *)) {
      padding-inline-end: 0;
    }
    .prose :where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-top: 0.5714286em;
      padding-inline-end: 0.5714286em;
      padding-bottom: 0.5714286em;
      padding-inline-start: 0.5714286em;
    }
    .prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-start: 0;
    }
    .prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
      padding-inline-end: 0;
    }
    [class ~ ="not-prose"] *)) {
      margin-top: 2em;
      margin-bottom: 2em;
    }
    [class ~ ="not-prose"] *)) {
      margin-top: 0;
    }
    [class ~ ="not-prose"] *)) {
      margin-bottom: 0;
    }
    .bg-white {
      --tw-bg-opacity: 1;
      background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    }
  </style>
</head>
<body style="margin: 0px; width: 100%; padding: 0px; -webkit-font-smoothing: antialiased; word-break: break-word">
  <div role="article" aria-roledescription="email" aria-label lang="en">
    <div class="bg-white" style="color: #374151; max-width: 65ch; font-size: 1rem; line-height: 1.75; margin-left: auto; margin-right: auto; border-width: 1px; background-color: rgb(255 255 255 / 1); padding: 2.5rem 0.5rem; font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'">
      {{{ content }}}
      <div style="text-align: center">
        Powered by <a href="https://blueq.app">BlueQ</a>
      </div>
    </div>
  </div>
</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Maizzle

How do I use `tailwindcss/typography` with Maizzle? #1240

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Maizzle

How do I use tailwindcss/typography with Maizzle? #1240

cowboycodr Apr 9, 2024

Replies: 1 comment · 1 reply

cossssmin Apr 9, 2024 Maintainer

cowboycodr Apr 9, 2024 Author

How do I use `tailwindcss/typography` with Maizzle? #1240

cowboycodr
Apr 9, 2024

Replies: 1 comment 1 reply

cossssmin
Apr 9, 2024
Maintainer

cowboycodr Apr 9, 2024
Author