Maizzle v6: CSS Purging Not Working + Missing v6 Documentation #1564

Heet-Bhalodiya · 2025-09-06T07:20:59Z

Heet-Bhalodiya
Sep 6, 2025

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.

cossssmin · 2025-09-06T17:04:53Z

cossssmin
Sep 6, 2025
Maintainer

Hi, thanks for taking the time to write a detailed report. v6 is currently not released, it's a work in progress as there are many issues with the new, modern syntax in Tailwind that we need to handle.

However, I'm not able to reproduce the issue with a fresh starter project (see the next branch there), can you try that? Maybe you have some old dependencies in your current project, try a clean install too.

0 replies

Heet-Bhalodiya · 2025-09-08T05:40:19Z

Heet-Bhalodiya
Sep 8, 2025
Author

Hello @cossssmin,

Thank you for your response.

The issue I am encountering cannot be reproduced on your side because, as you mentioned, I created a new test project using npx create-maizzle. I also verified in the package.json that it includes the following dependencies:

"@maizzle/framework": "latest",
"tailwindcss-preset-email": "latest"

In this test project, everything works as expected, and the issue does not occur. This is due to the fact that the test project includes a tailwind.config.js file.

However, in my actual project I am using Tailwind v4, which no longer includes a tailwind.config.js file. I have implemented the setup as described in my previous reply, yet the issue persists.

0 replies

cossssmin · 2025-09-08T08:52:26Z

cossssmin
Sep 8, 2025
Maintainer

Please check the next branch of the starter again, it's different (doesn't use tailwindcss-preset-email), you might have mixed dependencies and code which is causing you the issue:

https://github.com/maizzle/maizzle/blob/next/package.json

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Maizzle

Maizzle v6: CSS Purging Not Working + Missing v6 Documentation #1564

Uh oh!

{{title}}

Uh oh!

Replies: 3 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Maizzle

Maizzle v6: CSS Purging Not Working + Missing v6 Documentation #1564

Uh oh!

Heet-Bhalodiya Sep 6, 2025

Environment

Steps to Reproduce

1. Project Setup

2. Configuration Files

3. Build Commands

After build

Expected Behavior

Actual Behavior

Replies: 3 comments

Uh oh!

cossssmin Sep 6, 2025 Maintainer

Uh oh!

Heet-Bhalodiya Sep 8, 2025 Author

Uh oh!

Uh oh!

cossssmin Sep 8, 2025 Maintainer

Heet-Bhalodiya
Sep 6, 2025

cossssmin
Sep 6, 2025
Maintainer

Heet-Bhalodiya
Sep 8, 2025
Author

cossssmin
Sep 8, 2025
Maintainer