Background Gradients

Many email clients support CSS background gradients. Maizzle PHP includes a Tailwind CSS plugin that generates classes based on utilities you define in tailwind.js, so you can easily use them in your emails.

CSS-only

Simply add the utility class on an element. Specify a background color first, so that email clients that don't support CSS background gradients can display a fallback:

<table class="w-full" cellpadding="0" cellspacing="0" role="presentation">
  <tr>
    <td class="bg-blue bg-gradient-to-bottom-blue-dark">
      ...
    </td>
  </tr>
</table>

As explained in the Tailwind configuration docs, you can use any of the four directions.

Outlook Fallback

Outlook for Windows doesn't support CSS background gradients, but we can use VML.

You need to add it right after the element with the CSS gradient, wrapping your content like this:

<table class="w-full" cellpadding="0" cellspacing="0" role="presentation">
    <tr>
        <td class="bg-blue all-bg-gradient-to-bottom-blue-dark">
            <!--[if gte mso 9]>
            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
            <v:fill type="gradient" color="#0072FF" color2="#00C6FF" angle="90" />
            <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">            
            <div><![endif]-->
            [your overlayed HTML here]
            <!--[if gte mso 9]></div></v:textbox></v:rect><![endif]-->
        </td>
    </tr>
</table>

As you can see, you need to set a fixed width on the <v:rect> element - we recommend this instead of using mso-width-percent:1000;, as that is pretty buggy (especially in Outlook 2013).

Unfortunately, you will also need to manually set the HEX colors in the color="" and color2="" attributes, and you can only define an angle. But only if you care about email background gradients for Outlook 😉

Avoid inlining

Most email clients that support CSS gradients also support @media queries. This means that you can use the all- screen breakpoint utility to prevent Juice from inlining your gradient.

Maizzle PHP only enables the hover variant by default, so you first need to enable the responsive variant:

// tailwind.js

modules: {
// ...
gradients: ['responsive', 'hover'], // while here, consider if you really need 'hover'
// ...
},

Then, simply use the all breakpoint utility:

<table class="w-full" cellpadding="0" cellspacing="0" role="presentation">
    <tr>
        <td class="bg-blue all-bg-gradient-to-bottom-blue-dark">
            ...
        </td>
    </tr>
</table>

Custom utilities

The plugin will generate utility classes such as bg-gradient-to-{$direction}-{$name}. You can customize the bg-gradient-to- part, in ./tailwind/plugins/gradients.js:

return {
  [`.${e(`bg-gradient-to-top-${name}`)}`]: { backgroundImage: `linear-gradient(to top, ${colors.join(', ')})` },
  [`.${e(`bg-gradient-to-right-${name}`)}`]: { backgroundImage: `linear-gradient(to right, ${colors.join(', ')})` },
  [`.${e(`bg-gradient-to-bottom-${name}`)}`]: { backgroundImage: `linear-gradient(to bottom, ${colors.join(', ')})` },
  [`.${e(`bg-gradient-to-left-${name}`)}`]: { backgroundImage: `linear-gradient(to left, ${colors.join(', ')})` },
}

You can extend the code above to add more utilities to be generated by the plugin. For example, say we wanted to also generate a basic radial-gradient utility:

return {
  // original utilities...
  [`.${e(`bg-gradient-radial-${name}`)}`]: { backgroundImage: `radial-gradient(${colors.join(', ')})` },
}

Using Tailwind Colors

The default gradients in Maizzle PHP are 'hard-coded' HEX color codes extracted from the default Tailwind CSS palette:

let gradients = {
'grey-dark': ['#b8c2cc', '#8795a1'],
'red-dark': ['#e3342f', '#cc1f1a'],
'orange-dark': ['#f6993f', '#de751f'],
'yellow-dark': ['#ffed4a', '#f2d024'],
'green-dark': ['#38c172', '#1f9d55'],
'teal-dark': ['#4dc0b5', '#38a89d'],
'blue-dark': ['#3490dc', '#2779bd'],
'indigo-dark': ['#6574cd', '#5661b3'],
'purple-dark': ['#9561e2', '#794acf'],
'pink-dark': ['#f66d9b', '#eb5286'],
}

However, you can totally reference colors directly from the colors object, so that your generated gradients are in sync with your own colors:

let gradients = {
'grey-dark':    [colors['grey'], colors['grey-dark']],
'red-dark':     [colors['red'], colors['red-dark']],
'orange-dark':  [colors['orange'], colors['orange-dark']],
'yellow-dark':  [colors['yellow'], colors['yellow-dark']],
'green-dark':   [colors['green'], colors['green-dark']],
'teal-dark':    [colors['teal'], colors['teal-dark']],
'blue-dark':    [colors['blue'], colors['blue-dark']],
'indigo-dark':  [colors['indigo'], colors['indigo-dark']],
'purple-dark':  [colors['purple'], colors['purple-dark']],
'pink-dark':    [colors['pink'], colors['pink-dark']],
}