You can easily get started with AMP for Email in Maizzle.

For a syntax refresher, checkout the AMP Email docs or AMP Email examples.


⚡4email requires some special markup, so let's create an amp4email.html Layout:

<!doctype html>
<html ⚡4email>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
  <if condition="page.googleFonts">
    <link href="https://fonts.googleapis.com/css?family={{ page.googleFonts }}" rel="stylesheet" media="screen">
  <if condition="page.css">
    <style amp-custom>{{{ page.css }}}</style>
  <block name="head"></block>
  <block name="template"></block>


Let's create src/templates/amp-carousel.html, where we add a basic AMP carousel:

<extends src="src/layouts/amp4email.html">
  <block name="head">
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

  <block name="template">
    <div class="p-16">
      <div class="max-w-full">
        <amp-carousel width="600" height="400" layout="responsive" type="slides">
          <amp-img src="https://ampbyexample.com/img/image1.jpg" width="600" height="400" alt="a sample image"></amp-img>
          <amp-img src="https://ampbyexample.com/img/image2.jpg" width="600" height="400" alt="another sample image"></amp-img>
          <amp-img src="https://ampbyexample.com/img/image3.jpg" width="600" height="400" alt="and another sample image"></amp-img>

AMP Components

Add any AMP components inside the <block name="head"> tag, as shown above.

Disable inlining

Inline style attributes are not allowed in AMP, so make sure CSS inlining is disabled.

Do it either globally, in your environment config:

// config.js
module.exports = {
  inlineCSS: {
    enabled: false,
  // ...

... or locally, in the Template's Front Matter:

  enabled: false


AMP for Email doesn't support !important in CSS, either.

This can be easily turned off in tailwind.config.js:

module.exports = {
  important: false,
  // ...

However, you probably want to turn it off only for AMP templates.

You can do this with a custom build environment:

  1. Create a folder at src/templates/amp and only keep ⚡4email templates here.

  2. Create config.amp.js:

    module.exports = {
      build: {
        destination: {
          path: 'build_amp',
        templates: {
          source: 'src/templates/amp',
        tailwind: {
          config: 'tailwind.amp.js',
  3. Duplicate tailwind.config.js to tailwind.amp.js, and disable important:

    module.exports = {
      important: false,
      // ...
  4. Run maizzle build amp to build your ⚡4email templates.