From html-email-designer
Build responsive HTML emails using Maizzle — Tailwind CSS, modern Node, config-driven. Use when the user has chosen Maizzle, or is working in an existing Maizzle project, or wants Tailwind-based email authoring.
npx claudepluginhub danielrosehill/claude-code-plugins --plugin html-email-designerThis skill uses the workspace's default tool permissions.
Maizzle (https://github.com/maizzle/maizzle) is a modern email framework built on Tailwind CSS and PostCSS. Unlike Foundation/MJML it does not abstract tables with semantic tags — you write `<table>` directly and style with Tailwind utilities. The tradeoff: more control, modern tooling, faster builds.
Prevents silent decimal mismatch bugs in EVM ERC-20 tokens via runtime decimals lookup, chain-aware caching, bridged-token handling, and normalization. For DeFi bots, dashboards using Python/Web3, TypeScript/ethers, Solidity.
Share bugs, ideas, or general feedback.
Maizzle (https://github.com/maizzle/maizzle) is a modern email framework built on Tailwind CSS and PostCSS. Unlike Foundation/MJML it does not abstract tables with semantic tags — you write <table> directly and style with Tailwind utilities. The tradeoff: more control, modern tooling, faster builds.
npx create-maizzle
# follow prompts: pick the starter (default, promotional, blank), choose a name
cd <project>
npm install
npm run dev # serves at http://localhost:3000
Or clone a starter directly:
git clone https://github.com/maizzle/starter-default my-emails
cd my-emails && npm install
src/
├── components/ # Reusable fragments (Nunjucks/Liquid/Handlebars syntax)
├── layouts/
│ └── main.html # Wrapper with <!DOCTYPE> boilerplate
├── templates/
│ └── *.html # Individual emails (extends layout)
└── css/
├── tailwind.css # Tailwind entrypoint
└── custom.css # Additional custom CSS
config.js # Dev config (no inlining, no minify)
config.production.js # Prod config (inline CSS, minify HTML, remove unused)
tailwind.config.js # Tailwind config (scoped to email-safe utilities)
build_production/ # Output from `npm run build`
---
title: "Your subject line"
preheader: "Preview text — 80–90 chars"
---
<x-main>
<fill:template>
<table class="w-full font-sans">
<tr>
<td align="center" class="bg-slate-100 py-6">
<table class="w-[600px] bg-white">
<tr>
<td class="p-8">
<h1 class="text-2xl font-bold text-slate-900">Headline</h1>
<p class="mt-4 text-slate-700 leading-relaxed">Body copy.</p>
<table class="mt-6">
<tr>
<td class="rounded bg-blue-600 px-5 py-3">
<a href="https://example.com" class="text-white font-semibold no-underline">Call to action</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</fill:template>
</x-main>
Maizzle uses Posthtml components (<x-main>, <fill:template>) for layout composition. The layout supplies <!DOCTYPE>, <head>, and meta tags.
Maizzle's default tailwind.config.js extends Tailwind with email-safe values (arbitrary widths, no unsupported utilities). Customize palette/typography there:
module.exports = {
theme: {
extend: {
colors: {
brand: {
500: '#2c3e50',
600: '#1e2a38',
},
},
fontFamily: {
sans: ['Helvetica', 'Arial', 'sans-serif'],
},
},
},
}
npm run dev # watch mode, browser preview
npm run build # production: inline CSS, minify HTML, remove unused CSS
The build runs through PostCSS → Juice (inlining) → optional Tailwind purge/content scan → output to build_production/.
Key Maizzle feature: separate config.js (dev) and config.production.js (prod). Typical prod flags:
module.exports = {
build: {
templates: { source: 'src/templates', destination: { path: 'build_production' } },
},
inlineCSS: true,
removeUnusedCSS: true,
shorthandCSS: true,
prettify: false,
minify: { lineLengthLimit: 500 },
}
Create reusable fragments in src/components/:
<!-- src/components/button.html -->
<table>
<tr>
<td class="rounded bg-blue-600 px-5 py-3">
<a href="{{ href }}" class="text-white font-semibold no-underline">{{ text }}</a>
</td>
</tr>
</table>
Use with <x-button href="https://..." text="Click me" />.
inlineCSS: true must be set in config.production.js, not config.js.removeUnusedCSS: true; verify tailwind.config.js content paths include all template/component files.w-[600px]) work great and are common in email — preferred over adding custom theme values for one-offs.@apply inside templates — use utility classes directly; @apply only in CSS files.class attributes surviving in output → clients don't need them post-inlining; Maizzle strips by default, verify removeAttributes config.Hand off to email-client-gotchas (required reading) and inline-and-test for preview/send.