‏Maizzle: ساخت ایمیل با Vue و Tailwind CSS

ساختن ایمیل HTML همیشه دردسر بوده؛ چون کلاینت‌های ایمیل قوانین قدیمی و ناسازگار خودشون رو دارن و آدم مجبوره با جدول و استایل inline و هک‌های مخصوص هر کلاینت سروکله بزنه. Maizzle این کار رو با یه رویکرد امروزی حل می‌کنه: تو ایمیل‌هات رو با کامپوننت‌های Vue و کلاس‌های Tailwind CSS می‌نویسی و خود فریم‌ورک تبدیل‌شون می‌کنه به HTMLِ خالصِ سازگار با کلاینت‌ها.

هر ایمیل یه فایل Vue هست که از یه سری کامپوننت آماده و تست‌شده مثل Layout، Container، Section، Row، Column، Heading، Text، Button و Img تشکیل می‌شه. این کامپوننت‌ها طوری طراحی شدن که توی کلاینت‌های اصلی ایمیل درست رندر بشن، پس خودت لازم نیست نگران تفاوت‌هاشون باشی:

<Layout>
  <Container class="max-w-xl bg-white">
    <Section class="px-6 py-12">
      <Heading class="text-3xl font-bold text-gray-900">
        Build stunning emails, faster.
      </Heading>
      <Button href="https://maizzle.com" class="rounded-lg bg-indigo-600 text-white">
        Read the docs
      </Button>
    </Section>
  </Container>
</Layout>

نقطه قوت اصلی اینه که Tailwind CSS تو Maizzle یه شهروند درجه‌یکه و مخصوص سازگاری با کلاینت‌های ایمیل تنظیم شده. همون کلاس‌های آشنای Tailwind رو می‌نویسی و موقع build، فریم‌ورک کلاس‌ها رو به استایل‌های inline و مارک‌آپ مناسب ایمیل (شامل کامنت‌های شرطی مخصوص Outlook و متاتگ‌های لازم) تبدیل می‌کنه.

از نظر محیط توسعه هم یه Dev UI داره که موقع کدزدن پیش‌نمایش ایمیل رو به‌صورت زنده و بدون نیاز به رفرش بهت نشون می‌ده، تا تغییرهات رو همون لحظه ببینی. این تجربه توسعه برای کاری که همیشه کسل‌کننده و پر از آزمون‌وخطا بوده، یه فرق محسوسه.

Maizzle از نظر نحوه استفاده هم انعطاف داره: می‌تونی با یه دستور مثل npx maizzle new ازش استارت بزنی و از خط فرمان اجراش کنی، توی یه پروژه Vite موجود پلاگینش کنی، یا به‌صورت کتابخونه از داخل کد صداش بزنی. توی هر سه حالت همون کامپوننت‌ها و همون خروجی رو می‌گیری.

چون خروجی نهایی HTML خالصه، به هیچ سرویس ارسال خاصی وابسته نیستی و می‌تونی ایمیل‌های ساخته‌شده رو با هر پلتفرم ارسال ایمیلی بفرستی. سازنده‌ها هم اشاره می‌کنن که Maizzle توی شرکت‌هایی با اندازه‌های مختلف برای ساخت ایمیل‌های واقعی استفاده می‌شه و در کنارش یه مجموعه قالب آماده به اسم Mailviews رو هم برای سریع‌تر شروع‌کردن معرفی می‌کنن.

نکات کلیدی:

• نوشتن ایمیل HTML با کامپوننت‌های Vue و کلاس‌های Tailwind CSS
• خروجی به HTML خالص و سازگار با کلاینت‌های ایمیل (از جمله Outlook) کامپایل می‌شه
• کامپوننت‌های آماده و تست‌شده مثل Layout، Section، Button و Img
• Dev UI با پیش‌نمایش زنده بدون نیاز به رفرش
• قابل استفاده از خط فرمان، داخل پروژه Vite یا به‌صورت کتابخونه؛ مستقل از هر سرویس ارسال ایمیل