Tailwind CSS Config

Maizzle comes with an email-tailored tailwind.config.js that changes a few things for better email client compatibility.

These are the differences from the original Tailwind config.

Spacing units

Because of poor email client support, rem units have been replaced with px.

This affects the following:

  • borderRadius
  • fontSize
  • lineHeight
  • letterSpacing
  • spacing (max/min width and height, width, height, margin, padding, etc)

Extra spacing

The spacing scale also includes all percentage-based utilities, so you can use things like mb-1/2 or max-w-3/4 if you ever need to.

Extended leading

The lineHeight utilities have been extended to include all spacing scale values, so you can use leading to easily create vertical spacing, like this:

<div class="leading-64">&zwnj;</div>
<!-- Result: <div style="line-height: 64px">&zwnj;</div> -->

Colors

Maizzle uses the more vivid color palette from Tailwind UI.

Want to use the original Tailwind colors? Simply remove the colors key from tailwind.config.js. Since we redefine the originals by extending the default Tailwind config, doing this will revert to the original colors.

!important

Emails still need to use inline CSS, most notably for these reasons:

  • Outlook only reads the first class in a class="" attribute, and ignores the rest. So it'll only use a from class="a b"
  • Some email clients don't support embedded CSS (i.e. in <style>)

Because of this, the important option is set to true by default, so that responsive utilities can actually override inlined CSS.

You may disable this by adding the important key to your Tailwind config:

// tailwind.config.js
module.exports = {
  important: false,
}

Separator

Characters like : in hover:bg-black need to be \escaped in CSS.

Because some email clients (Gmail 👀) fail to parse selectors with escaped characters, Maizzle normalizes all your CSS selectors and HTML classes, replacing any escaped characters it finds with email-safe alternatives.

So you can safely use Tailwind's awesome default separator and write classes like sm:w-1/2 - Maizzle will convert that to sm-w-1-2 in your compiled template:

// tailwind.config.js
module.exports = {
  separator: ':',
  theme: {
    width: {
      '2/5': '40%', // w-2-5
      '50%': '50%', // w-50pc
      '2.5': '0.625rem', // w-2_5
    }
  }
}

You can also configure the replacement mappings.

Screens

Maizzle uses a desktop-first approach with max-width, instead of Tailwind's default mobile-first with min-width.

Of course, you're free to adjust this as you like:

screens: {
  sm: {max: '600px'},
},

More on screens, in the Tailwind CSS docs.

Plugins

You can of course use any Tailwind plugin, please see the docs.

Disabled

Because CSS variables are poorly supported in email clients, Maizzle's tailwind.config.js disables Tailwind's opacity plugins:

  • backgroundOpacity
  • borderOpacity
  • divideOpacity
  • placeholderOpacity
  • textOpacity

Additionally, the animation core plugin is also disabled, since it is not purged from the CSS and you won't need it in most cases.

If you do need the animation utilties, simply delete the line from corePlugins at the bottom of your tailwind.config.js:

corePlugins: {
- animation: false,
  backgroundOpacity: false,
  borderOpacity: false,
  divideOpacity: false,
  placeholderOpacity: false,
  textOpacity: false,
},