When building emails with Maizzle v6 (Framework v6.0.0-15), when builds do complete, the generated emails contain massive amounts of unoptimized Tailwind CSS (16,000+ lines) instead of purged/optimized CSS.
Environment
- Maizzle Framework: v6.0.0-15
- Maizzle CLI: v2.0.0
- Node.js: 22.12.0
- OS: macOS
- Tailwind CSS: v4.1.10 (via @maizzle/tailwindcss latest)
Steps to Reproduce
1. Project Setup
// package.json dependencies
{
"@maizzle/framework": "next",
"@maizzle/tailwindcss": "latest"
}2. Configuration Files
config.js (ES module format as required by v6):
export default {
build: {
content: ['emails/**/*.html'],
output: {
path: './supabase/email'
}
},
}config.production.js:
export default {
build: {
output: {
path: './supabase/email'
}
},
css: {
inline: true,
purge: true,
shorthand: true
},
prettify: true
}tailwind.css (as required by v6 release notes):
@import "@maizzle/tailwindcss";
img {
@apply max-w-full align-middle;
}layouts/main.html:
<!DOCTYPE {{{ page.doctype || 'html' }}}>
<html lang="{{ page.language || 'en' }}" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="{{ page.charset || 'utf-8' }}" />
<!-- other meta tags -->
<link rel="stylesheet" href="tailwind.css" inline>
</head>
<body class="m-0 p-0 w-full">
<if condition="page.preheader">
<div class="hidden">{{{ page.preheader }}}</div>
</if>
<div role="article" aria-roledescription="email" aria-label="{{{ page.title || '' }}}"
lang="{{ page.language || 'en' }}">
<yield />
</div>
</body>
</html>emails/email-change.html (example):
---
title: 'Confirm Change of Email Address'
preheader: 'Please confirm your new email address to complete the change.'
bodyClass: bg-slate-50
---
<x-main>
<div class="bg-slate-50 px-6 font-sans">
<table align="center">
<tr>
<td class="w-[600px] max-w-full">
<table class="w-full">
<tr>
<td class="rounded bg-white p-12 text-left shadow-sm sm:px-6 sm:py-8">
<h1 class="m-0 mb-6 text-3xl font-semibold text-black">Test Email</h1>
<p class="m-0 mb-6 text-base leading-6 text-slate-700">This is a test email with Tailwind classes.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</x-main>3. Build Commands
# Development build - hangs indefinitely
npm run maizzle:build
After build
Expected Behavior
- CSS should be purged - only used Tailwind classes should remain in the output
- File size should be optimized - production builds should be minimal
- Minification should work - HTML should be compressed in production
Actual Behavior
- 16,000+ lines of CSS instead of optimized/purged CSS
- All Tailwind CSS custom properties added in the all the generated html files which leads to heavy files
- Entire Tailwind CSS framework instead of just used classes
The current documentation at https://maizzle.com/docs/ primarily covers v5, and v6-specific features are poorly documented.
When building emails with Maizzle v6 (Framework v6.0.0-15), when builds do complete, the generated emails contain massive amounts of unoptimized Tailwind CSS (16,000+ lines) instead of purged/optimized CSS.
Environment
Steps to Reproduce
1. Project Setup
2. Configuration Files
config.js (ES module format as required by v6):
config.production.js:
tailwind.css (as required by v6 release notes):
layouts/main.html:
emails/email-change.html (example):
3. Build Commands
# Development build - hangs indefinitely npm run maizzle:buildAfter build
Expected Behavior
Actual Behavior
The current documentation at https://maizzle.com/docs/ primarily covers v5, and v6-specific features are poorly documented.