This content originally appeared on DEV Community and was authored by Gabriel Moura
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.
Instalação
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:
/*
|-------------------------------------------------------------------------------
| 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:
/*
|-------------------------------------------------------------------------------
| 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:
/** @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 para resources/maizzle .
Altere o package.json para :
"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 @{{}} .
# 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.
# 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
php artisan make:mail OrderShipped
<?php
namespace App\Mail;
use App\Models\Order;
use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Mail\Mailables\Content;
use Illuminate\Queue\SerializesModels;
class OrderShipped extends Mailable
{
use Queueable, SerializesModels;
/**
* Create a new message instance.
*/
public function __construct(
public Order $order,
) {}
/**
* Get the message content definition.
*/
public function content(): Content
{
return new Content(
view: 'mail.welcome',
with: [
'orderName' => $this->order->name,
],
);
}
}
Um exemplo de template resources/maizzle/templates/welcome.blade.php
<x-main>
<div class="bg-slate-50 font-sans sm:px-4">
<table align="center">
<tr>
<td class="w-[552px] max-w-full">
<div class="my-12 text-center sm:my-8">
<a href="https://maizzle.com">
<img
src="{{ asset("/static/logo.svg") }}"
width="70"
alt="Maizzle"
/>
</a>
</div>
<table class="w-full">
<tr>
<td class="rounded bg-white p-12 text-base text-slate-700 shadow-sm sm:px-6" >
<h1 class="m-0 mb-6 text-2xl font-semibold text-black sm:leading-8" >
Hello, {{ $orderName }}
</h1>
<p class="m-0 leading-6">
Is it you we're looking for?
<br />
<br />
Please confirm your email address by
clicking the button below:
</p>
<x-spacer height="24px" />
<x-button href="https://maizzle.com">
Confirm email address →
</x-button>
<x-divider
space-y="32px"
class="bg-slate-200"
/>
<p class="m-0">
If you didn't sign up for Maizzle, you can
safely ignore this email.
<br />
<br />
Thanks,
<br />
The Maizzle Team
</p>
</td>
</tr>
<tr role="separator">
<td class="leading-12">‍</td>
</tr>
<tr>
<td class="px-6 text-center text-xs text-slate-600">
<p class="m-0 mb-4 uppercase">
Powered by Maizzle
</p>
<p class="m-0 italic">
Quickly build HTML emails with Tailwind CSS
</p>
<p class="cursor-default">
<a
href="https://maizzle.com/docs/"
class="text-indigo-700 [text-decoration:none] hover:![text-decoration:underline]"
>
Docs
</a>
•
<a
href="https://github.com/maizzle"
class="text-indigo-700 [text-decoration:none] hover:![text-decoration:underline]"
>
Github
</a>
•
<a
href="https://twitter.com/maizzlejs"
class="text-indigo-700 [text-decoration:none] hover:![text-decoration:underline]"
>
Twitter
</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</x-main>
Rode o comando abaixo para gerar o arquivo blade final.
npm run mail:build
This content originally appeared on DEV Community and was authored by Gabriel Moura
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Gabriel Moura | Sciencx (2024-09-12T03:31:45+00:00) Como Instalar o Maizzle no Laravel. Retrieved from https://www.scien.cx/2024/09/12/como-instalar-o-maizzle-no-laravel/
" » Como Instalar o Maizzle no Laravel." Gabriel Moura | Sciencx - Thursday September 12, 2024, https://www.scien.cx/2024/09/12/como-instalar-o-maizzle-no-laravel/
HARVARDGabriel Moura | Sciencx Thursday September 12, 2024 » Como Instalar o Maizzle no Laravel., viewed ,<https://www.scien.cx/2024/09/12/como-instalar-o-maizzle-no-laravel/>
VANCOUVERGabriel Moura | Sciencx - » Como Instalar o Maizzle no Laravel. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/12/como-instalar-o-maizzle-no-laravel/
CHICAGO" » Como Instalar o Maizzle no Laravel." Gabriel Moura | Sciencx - Accessed . https://www.scien.cx/2024/09/12/como-instalar-o-maizzle-no-laravel/
IEEE" » Como Instalar o Maizzle no Laravel." Gabriel Moura | Sciencx [Online]. Available: https://www.scien.cx/2024/09/12/como-instalar-o-maizzle-no-laravel/. [Accessed: ]
rf:citation » Como Instalar o Maizzle no Laravel | Gabriel Moura | Sciencx | https://www.scien.cx/2024/09/12/como-instalar-o-maizzle-no-laravel/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.