Skip to main content
In this tutorial, you’ll learn how to make use of custom config files in Maizzle to create interactive AMP for Email templates. For a syntax refresher, checkout the AMP Email docs or AMP Email examples.
Want to dive right in? Checkout our AMP for Email Starter.

​
Initial setup

As always, let’s scaffold a new project: 
npx create-maizzle
In the interactive setup wizard, specify the directory name to create the project in, i.e. ./amp-emails, and select the Default Starter. Choose Yes when prompted to Install dependencies. Once it finishes installing dependencies, open the project folder in your favorite editor.

​
Layout

AMP for Email requires some special markup, so let’s create an amp.html Layout and save it under layouts:
layouts/amp.html
<!doctype html>
<html ⚡4email>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
  <style amp-custom>{{{ page.css }}}</style>
  <stack name="head" />
</head>
<body>
  <yield />
</body>
</html>

​
Template

For this tutorial, we’ll use the AMP Carousel component. Create emails/amp/carousel.html and add a basic AMP carousel:
emails/amp/carousel.html
<x-amp>
  <push name="head">
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
  </push>

  <div class="p-4">
    <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 src="https://ampbyexample.com/img/image2.jpg" width="600" height="400" alt="another sample image" />
        <amp-img src="https://ampbyexample.com/img/image3.jpg" width="600" height="400" alt="and another sample image" />
      </amp-carousel>
    </div>
  </div>
</x-amp>
You initialize AMP components by pushing their <script> tag to the <stack name="head" /> from the layout, as shown above. You can then use the component’s markup inside <fill:template></fill:template>.

​
CSS inlining

Inline style attributes are not allowed in AMP, so you need to disable CSS inlining. Do it either globally, in your environment config:
config.js
export default {
  css: {
    inline: false,
  }
}
… or locally, in the Template’s Front Matter:
emails/amp/carousel.html
---
css:
  inline: false
---

​
!important

AMP for Email doesn’t support !important in CSS, either. This can be easily turned off in your Tailwind config:
tailwind.config.js
export default {
  important: false,
}
However, you probably want to turn it off only for AMP templates. You can do this by updating your <style> tag for AMP templates to use a different Tailwind config file:
layouts/amp.html
<style>
  @config 'tailwind.amp.js';
  @tailwind components;
  @tailwind utilities;
</style>
Next, duplicate tailwind.config.js to tailwind.amp.js and disable important:
tailwind.amp.js
module.exports = {
  important: false,
}
Finally, run maizzle build amp to build your ⚡4email templates. In case you haven’t installed the Maizzle CLI, add an NPM script to package.json:
package.json
"scripts": {
  "build:amp": "maizzle build amp"
}
You’d then build your AMP emails by running npm run build:amp.

​
Resources

Build docs developers (and LLMs) love

Get started for freeTalk to us