CSS

The source/_styles directory contains all CSS files used by the framework. Maizzle uses Webpack and PostCSS to compile Tailwind and your custom CSS, then processes it further according to your configuration.


main.css

This is the master CSS file, which pulls in Tailwind components and utilities, as well as any CSS partials:

@import  "tailwindcss/components";

@import  "partials/reset";
@import  "partials/custom-utilities";

@import  "tailwindcss/utilities";

As you can see, partials are imported before Tailwind utilities, so that the latter can still override them.

Custom utilities

The custom-utilities.css partial is where you can register any custom Tailwind utilities.

Maizzle provides some custom utilities by default:

.mso-leading-exactly {
  mso-line-height-rule: exactly;
}

@responsive  {
  .table-row-group {
    display: table-row-group;
  }
  .table-header-group {
    display: table-header-group;
  }
  .table-footer-group {
    display: table-footer-group;
  }
  .table-column-group {
    display: table-column-group;
  }
  .table-column {
    display: table-column;
  }
  .table-caption {
    display: table-caption;
  }
}

Partials

Partials live in the _styles/partials directory, and are imported with postcss-import.

You can use them to define additional styles that should be compiled and placed in the embedded CSS tag, when Maizzle builds your emails. Besides generic resets, you can use these to extract Tailwind utilities to components, through the @apply directive.

Styles in partials will be inlined if inlining is enabled, and as long as they're not inside a @media query.

reset.css

Maizzle provides a reset.css file where you can add all your generic CSS resets:

@screen  all {
  img {
    @apply  max-w-full;
  }

  td, th {
    box-sizing: border-box;
  }
}

body {
  box-sizing: border-box;
  @apply  m-0 p-0 w-full;
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
}

img {
  border: 0;
  @apply  leading-full align-middle;
}

Extra CSS

Maizzle uses a combination of laravel-mix-purge-css, Juice, and email-remove-unused-css options to purge unused CSS and classes after the initial Tailwind build, and then to remove already inlined classes.

You can use the extra.css file to define styles that won't be inlined. The contents of this file are added inside a <style></style> tag that will be ignored by the inliner, so you can use it to define email client-specific resets that would normally be removed, because they usually target selectors that don't exist in your markup.

Shorthand CSS

Thanks to postcss-merge-longhand, Maizzle can rewrite your CSS padding, margin, and border properties in shorthand-form, where possible.

Because Tailwind classes mostly map one-to-one with CSS properties, this won't have any effect on them. Instead, it's very useful when you extract components with Tailwind's @apply.

For example, considering this template:

---
title: Confirm your email
preheader: Please verify your email address with us
bodyClasses: bg-grey-light
---

<div class="col">test</div>

... let's extract a .col class in an imaginary source/_styles/components.css:

.col {
  @apply  py-8 px-4;
}

Previously, that would have given us this:

<div style="padding-top: 8px; padding-bottom: 8px; padding-left: 4px; padding-right: 4px;">test</div>

Now, thanks to postcss-merge-longhand, we get this:

<div style="padding: 8px 4px;">test</div>

As mentioned, this works for padding, margin, and border. Using shorthand CSS for these is well supported in email clients and will make your HTML lighter, but the shorthand border is particularly useful because it's the only way Outlook will render it properly.

Shorthand borders

To get the PostCSS plugin to rewrite your CSS borders in shorthand-form, you need to specify all these:

When extracting a component class in Tailwind, that means you can do something like this:

.my-border {
  @apply  border border-solid border-blue;
}

... which, following the example above, will result in this shorthand form:

<div style="border: 1px solid #3490dc;">Border example</div>