⚡4email templates

Original, free ⚡4email templates built with Tailwind CSS in Maizzle.

View on GitHub →

Getting started

Scaffold a new project based on this starter:

npx create-maizzle

In the interactive setup wizard, specify the directory name to create the project in, i.e. ./amp-emails, select Custom Starter → AMP4Email, and choose Yes when prompted to Install dependencies.

Next, switch the current directory to amp-emails:

cd amp-emails

Start local development:

npm run dev

Build emails for production:

npm run build

Templates

The following templates are included:

  • Accordion
  • Carousel

Tailwind CSS

AMP templates don't allow inline CSS, so important is set to false in tailwind.config.js. Because of that, this Starter also uses an md screen and a mobile-first strategy instead of the default desktop-first approach from Maizzle.

AMP Components

For each component that you want to use in a template, you need to add its script to the <head>. We can push to the head stack from the Template:

src/templates/accordion.html
<x-main>

  <push name="head">

    <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

  </push>



  <!-- ...  -->

</x-main>