⚡4email templates

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

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

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:

emails/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>