PostHTML

Maizzle uses PostHTML to transform your HTML.

posthtml-content

posthtml-content is used to compile <style> blocks in your Templates with PostCSS.

Use the tailwind attribute on a <style> tag inside a Template:

---
title: Using Tailwind CSS inside a Template
---

{% block head %}
<style tailwind>
  a {
    @apply text-blue-500;
  }

  @screen sm {
    .button {
      padding: 10px 20px;
    }
  }
</style>
{% endblock %}

Both regular CSS and Tailwind directives are supported.

prevent-widows

prevent-widows is used to prevent widow words in your email templates.

Simply add a prevent-widows attribute on any HTML tag, and it will replace the last space in every text node with a &nbsp;.

---
title: Preventing widow words
---

{% block template %}
<div prevent-widows>
  <p>Ullamco aliqua labore do proident commodo officia excepteur.</p>
  <p>Reprehenderit dolore deserunt elit reprehenderit cillum nostrud do laborum et.</p>
</div>
{% endblock %}

That will output:

<div>
  <p>Ullamco aliqua labore do proident commodo officia&nbsp;excepteur.</p>
  <p>Reprehenderit dolore deserunt elit reprehenderit cillum nostrud do laborum&nbsp;et.</p>
</div>