Maizzle é uma estrutura que ajuda você a criar rapidamente e-mails em HTML com Tailwind CSS e pós-processamento avançado específico para e-mails. Recomendo a leitura da documentação em [maizzle.com](https://maizzle.com/). ## Instalação ```bash npm install tailwindcss-box-shadow@"^2.0.3" \ tailwindcss-email-variants@"^3.0.1" \ tailwindcss-mso@"^1.4.3" \ tailwindcss-preset-email@"^1.1.0" \ @maizzle/framework@"latest" \ autoprefixer@"^10.4.20" ``` ## Configuração Crie `maizzle.config.local.cjs` na raiz do projeto com o conteúdo abaixo: ```js /* |------------------------------------------------------------------------------- | Development config maizzle.config.local.cjs https://maizzle.com/docs/environments |------------------------------------------------------------------------------- | | The exported object contains the default Maizzle settings for development. | This is used when you run `maizzle build` or `maizzle serve` and it has | the fastest build time, since most transformations are disabled. | */ /** @type {import("@maizzle/framework").Config} */ module.exports = { locals: { assetPath: "static/emails", page: { language: "pt_BR" }, app: { name: "Maizzle", url: "https://maizzle.com" } }, build: { posthtml: { expressions: { delimiters: ["[[", "]]"], unescapeDelimiters: ["[[[", "]]]"] } }, browsersync: { watch: ["resources/maizzle/**/*.*", "tailwind.maizzle.js"] }, tailwind: { config: "tailwind.maizzle.js", css: "resources/maizzle/css/tailwind.css" }, templates: { source: "resources/maizzle/templates", filetypes: ["html", "blade.php"], destination: { path: "build" }, assets: { source: "resources/maizzle/images", destination: "images" } }, layouts: { root: "resources/maizzle/layouts" }, components: { root: "resources/maizzle/", folders: ["components", "layouts", "templates"] }, fail: "verbose" }, prettify: true }; ``` Crie `maizzle.config.production.cjs` na raiz do projeto com o conteúdo abaixo: ```js /* |------------------------------------------------------------------------------- | Production config maizzle.config.production.cjs https://maizzle.com/docs/environments |------------------------------------------------------------------------------- | | This is where you define settings that optimize your emails for production. | These will be merged on top of the base config.js, so you only need to | specify the options that are changing. | */ /** @type {import("@maizzle/framework").Config} */ module.exports = { locals: { assetPath: "static/emails", page: { language: "pt_BR" }, app: { name: "Maizzle", url: "https://maizzle.com" } }, build: { posthtml: { expressions: { delimiters: ['[[', ']]'], unescapeDelimiters: ['[[[', ']]]'] } }, tailwind: { config: "tailwind.maizzle.js", css: "resources/maizzle/css/tailwind.css" }, templates: { source: "resources/maizzle/templates", filetypes: ["html", "blade.php"], destination: { path: "resources/views/emails", extension: "blade.php" }, assets: { source: "resources/maizzle/images", destination: "../../static/emails" } }, layouts: { root: "resources/maizzle/layouts" }, components: { root: "resources/maizzle/", folders: ["components", "layouts", "templates"] }, fail: "verbose" }, inlineCSS: true, removeUnusedCSS: true, shorthandCSS: true, minify: true, events: { afterBuild(files, config) { console.log(files); } } }; ``` Crie `tailwind.maizzle.js` na raiz do projeto com o conteúdo abaixo: ```js /** @type {import("tailwindcss").Config} */ // tailwind.maizzle.js export default { content: [ "./resources/maizzle/components/**/*.{html,blade.php}", "./resources/maizzle/layouts/**/*.{html,blade.php}", "./resources/maizzle/templates/**/*.{html,blade.php}", ], theme: { screens: { sm: { max: "600px" }, xs: { max: "425px" }, }, extend: { spacing: { screen: "100vw", full: "100%", 0: "0", 0.5: "2px", 1: "4px", 1.5: "6px", 2: "8px", 2.5: "10px", 3: "12px", 3.5: "14px", 4: "16px", 4.5: "18px", 5: "20px", 5.5: "22px", 6: "24px", 6.5: "26px", 7: "28px", 7.5: "30px", 8: "32px", 8.5: "34px", 9: "36px", 9.5: "38px", 10: "40px", 11: "44px", 12: "48px", 14: "56px", 16: "64px", 20: "80px", 24: "96px", 28: "112px", 32: "128px", 36: "144px", 40: "160px", 44: "176px", 48: "192px", 52: "208px", 56: "224px", 60: "240px", 64: "256px", 72: "288px", 80: "320px", 96: "384px", }, borderRadius: { none: "0px", sm: "2px", DEFAULT: "4px", md: "6px", lg: "8px", xl: "12px", "2xl": "16px", "3xl": "24px", }, boxShadow: { sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)", DEFAULT: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)", md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)", lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)", xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)", "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)", inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)", }, fontFamily: { sans: [ "ui-sans-serif", "system-ui", "-apple-system", '"Segoe UI"', "sans-serif", ], serif: [ "ui-serif", "Georgia", "Cambria", '"Times New Roman"', "Times", "serif", ], mono: ["ui-monospace", "Menlo", "Consolas", "monospace"], }, fontSize: { 0: "0", xxs: "11px", xs: "12px", "2xs": "13px", sm: "14px", "2sm": "15px", base: "16px", lg: "18px", xl: "20px", "2xl": "24px", "3xl": "30px", "4xl": "36px", "5xl": "48px", "6xl": "60px", "7xl": "72px", "8xl": "96px", "9xl": "128px", }, letterSpacing: (theme) => ({ ...theme("width"), }), lineHeight: (theme) => ({ ...theme("width"), }), maxWidth: (theme) => ({ ...theme("width"), xs: "160px", sm: "192px", md: "224px", lg: "256px", xl: "288px", "2xl": "336px", "3xl": "384px", "4xl": "448px", "5xl": "512px", "6xl": "576px", "7xl": "640px", }), minHeight: (theme) => ({ ...theme("width"), }), minWidth: (theme) => ({ ...theme("width"), }), }, }, corePlugins: { preflight: false, backgroundOpacity: false, borderOpacity: false, divideOpacity: false, placeholderOpacity: false, textOpacity: false, }, plugins: [ require("autoprefixer")(), require("tailwindcss-mso"), require("tailwindcss-box-shadow"), require("tailwindcss-email-variants"), ], presets: [require("tailwindcss-preset-email")], }; ``` Copie o conteúdo de `src/` que pode ser encontrado no [repositório oficial](https://github.com/maizzle/maizzle) para `resources/maizzle` . Altere o ` package.json ` para : ```json "scripts":{ ... "mail": "maizzle serve", "mail:build": "maizzle build production" } ``` Altere os conteúdos das pastas `components`, `layouts`, `templates` para usar `[[ ]]` e `[[[ ]]]` ao invés de `{{ }}` e `{{{ }}}`, pois a configuração permite usar as diretivas do blade sem usar `@{{}}` . ```bash # find resources/maizzle -type f: Encontra todos os arquivos dentro do diretório resources/maizzle # -exec sed -i 's/{{{/[[[/g; s/}}}/]]]/g; s/{{/[[/g; s/}}/]]/g' {} \;: Para cada arquivo encontrado, o comando sed faz as substituições. find resources/maizzle -type f -exec sed -i 's/{{{/[[[/g; s/}}}/]]]/g; s/{{/[[/g; s/}}/]]/g' {} \; ``` Altere o nome dos arquivos em `components`, `layouts`, `templates` para terminarem com `blade.php`, isso ajudará o seu IDE a identificar as diretivas blade. ```bash # find resources/maizzle -type f -name "*.html": Encontra todos os arquivos que terminam com .html no diretório resources/maizzle. # -exec bash -c 'mv "$0" "${0%.html}.blade.php"' {}: Para cada arquivo encontrado, o comando mv renomeia o arquivo removendo a extensão .html e adicionando .blade.php. find resources/maizzle -type f -name "*.html" -exec bash -c 'mv "$0" "${0%.html}.blade.php"' {} \; ``` ## Uso ```bash php artisan make:mail OrderShipped ``` ```php $this->order->name, ], ); } } ``` Um exemplo de template `resources/maizzle/templates/welcome.blade.php` ```php+HTML

Hello, {{ $orderName }}

Is it you we're looking for?

Please confirm your email address by clicking the button below:

Confirm email address →

If you didn't sign up for Maizzle, you can safely ignore this email.

Thanks,
The Maizzle Team

‍

Quickly build HTML emails with Tailwind CSS

Docs • Github • Twitter

``` Rode o comando abaixo para gerar o arquivo blade final. ```bash npm run mail:build ```

gabrielmoura

Como Instalar o Maizzle no Laravel

Join Our Newsletter. No Spam, Only the good stuff.