maizzle/framework v6.0.0-rc.17 on GitHub

New features

QR code in dev

Running maizzle serve --host or npm run dev -- --host with the official starter will show a QR code for the network URL, so you don't have to type it on your phone:

`<Tailwind>` component

Added this component to make it easier to migrate from React Email.

You just wrap it around anything inside the emaill body content and it outputs the <style> tag automatically in the <head>:

<template>
  <Html>
    <Head />
    <Body>
      <Tailwind>
        <Container class="max-w-xl font-inter">
          ...
        </Container>
      </Tailwind>
    </Body>
  </Html>
</template>

You need to include the <Head /> component when using it, and nesting <Taillwind> components ignores the nested ones, only the top-most will take effect.

By default, it uses import "@maizzle/tailwindcss"; to compile Tailwind, but you can provide your own via the config slot:

<template>
  <Html>
    <Head />
    <Body>
      <Tailwind>
+		<template #config>
+			import "@maizzle/tailwindcss";
+			
+			/* ... add custom CSS? */
+		</template>
        <Container class="max-w-xl font-inter">
          ...
        </Container>
      </Tailwind>
    </Body>
  </Html>
</template>

Bundled `@maizzle/tailwindcss`

The framework now bundles our Tailwind CSS v4 config for HTML email, so you don't need to install it explicitly in your projects anymore.

Fixed

fixed some pnpm issues with component auto-imports
fixed the source code previews jumping when you saved a template
fixed an issue where <style embed was not surviving css purging

Changed

switching from HTML preview to source code previews is now instant, as they are prefetched in the background

Full commits list:

fix: resolve component types in IDEs under pnpm 04293f7
fix: resolve culori and postcss-safe-parser under pnpm 4a01c0f
feat: add <Tailwind> component 08a8b6d
feat: bundle @maizzle/tailwindcss 59fe17d
fix: prevent jump in source views 5504878
fix: prefetch source previews in background d52c86b
refactor: render qr code before server info 725ed6f
fix: preserving embedded style tags 6f9d22b
chore: update row warning for missing columns afb1b1b
feat: network url qr code bd51ecc
chore: declare *.vue module shim for tsc b9a045c
refactor: don't expose renderer bbd956a
fix: using safeParser in purgecss transformer d64032a

v6.0.0-rc.16...v6.0.0-rc.17