soheilpro / mailwind Goto Github PK

View Code? Open in Web Editor NEW

3.2K 27.0 75.0 86 KB

Use Tailwind CSS to design HTML emails.

License: MIT License

JavaScript 99.58% CSS 0.42%

tailwind tailwindcss email html-email css html

mailwind's Introduction

Mailwind

Use Tailwind CSS to design HTML emails.

Tailwind makes it very easy to design websites, why not use it to design HTML emails? I've been using this for volt.fm and pikaso.me and it has made my life a lot easier.

Install

npm install -g mailwind

Usage

Design your HTML email using the Tailwind utility classes like you normally would for the web.

Then run the following command to generate the corresponding CSS file:

mailwind --input-html email.html --output-css style.css

Or run this command to generate an inlined HTML file:

mailwind --input-html email.html --output-html email-inlined.html

Options

--input-css

The path to your base CSS file. Use this if you need to write custom CSS. Defaults to style.css.

--input-html

The path to your HTML email file.

--output-css

The path to the CSS file that will be generated.

--output-html

The path to the inlined HTML file that will be generated.

--tailwind-config

The path to your custom Tailwind configuration file. Defaults to tailwind.config.js.

Note

In the provided default config file, all the units are changed to pixel which is probably what you want for HTML emails.

Example

Given an email.html file with this content:

<html>
  <body>
    <p class="font-bold text-lg">Welcome</p>
  </body>
</html>

running this command:

mailwind \
  --input-html email.html \
  --output-css style.css \
  --output-html email-inlined.html

will generate the following CSS and inlined HTML files:

.text-lg {
  font-size: 18px
}

.font-bold {
  font-weight: 700
}

<html>
  <body>
    <p class="font-bold text-lg" style="font-size: 18px; font-weight: 700;">Welcome</p>
  </body>
</html>

Version History

2.2
- Tailwind CSS is now a peer dependency so you can npm install newer versions if you need to (Thanks Songkeys)
2.1
- Colors are now generated without using CSS variables
- Upgrade to Tailwind CSS v3.2
2.0
- New design
- Upgrade to Tailwind CSS v3
1.0
- Initial release

Author

Soheil Rashidi

Copyright and License

Licensed under the The MIT License (the "License"); you may not use this work except in compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:

http://www.opensource.org/licenses/mit-license.php

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

mailwind's People

Contributors

Stargazers

Watchers

Forkers

olgunsoftwarearchive lstables aishacodes yosoft cloudworxx yolkmonday anjolovic senius-fork breno-dsuite magicbyt3 luizeof ihranova anuzpandey ayush10 wignesh tyidnet zdienos knaitas fabbrikk parkerproject evanchristians davgit daveek jpcaparas suryatmodulus zh30 josbert2 dmoena sopokudamoah elonwu saurabhnemade bumbummen99 leandcar rajneeshaggarwal swaitw thinkplus thinkryan rkbk2000 kenchoong mohameddali spread0x doubaokun swhinnie keevan essajmahmood beesitech rkalkani productinfo bluecommunitysustainability jackwiy eyepulp sanyuesiyuewuyue mv-stns laravel-lib cesardraw2 mirayoo rafael-doctom drigoalexander alexferrari88 0x38 songkeys kennstack01 windev0609 bathazarepaige sabiertas won5572 censerchat benjythebee mkbabb minhdatplus dywants simple-company zonalds kerasking

mailwind's Issues

Don't understand usage

Please help for more documentation

It does not work with user-defined fonts

Common colors like "bg-primary-500" don´t get converted into inline css

Would it be possible to convert everything to inline styles?

Maybe as a CLI flag or option. Some mail clients don't parse <style> tags, but do parse inline styles.

Currently requires all of the project's PostCSS plugins to be installed globally... why?

I found out about this utility today on StackShare's daily email and instantly wanted to try it out! Got it all setup in my project and ran into some errors running it until I installed all of the PostCSS plugins my project was using globally.

yarn global add postcss autoprefixer

Note, I was running the mailwind command from a node.js script making a call to child_process.execSync(), so I could generate all the inlined email templates in one swoop, so I don't know if that makes a difference or not to whether the dependencies need to be installed globally.

Difference from `Maizzle`

Doesn't Maizzle let you write email templates with tailwind?
Are there any other benefits that this library has over maizzle?

Custom Font CSS from tailwind.config.js

I want to create custom font css im importing from another file, but that wont work unfortunately.
There are no .font-{custom fontname} classes in my css.

.

Not supporting tailwind newer version

I notice that some tailwind classes are not in Mailwind

Would this plugin work with @tailwindcss/typography ?

Allow the usage of conditional breakpoint styling

I want to use breakpoint styling in my mail templates, like this:

<div class="flex w-full flex-col items-start gap-3 md:flex-row md:justify-between">

... but mailwind generates following snippet from this line:

<div class="flex w-full flex-col items-start gap-3 md:flex-row md:justify-between" style="box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 0.75rem;">

So I wonder if tailwind can also build these styles correctly?

feat: freemarker support

while working in java based envs, a lib called freemarker for generating html could be used. we are currelty looking for using mailwind to generate the templates here.

We would like it, if .ftl files can also get parsed by the mailwind lib, without issues.
we currelty discovered the following misbehaviors:

.ftl commands are parsed as comments => <#if> =>

this would be great <3

How to make this work?

Thanks a lot for the package but the usage instructions are not clear at all. I have Juice installed, but then how do I pass the css file into it to render the email?

const TestMail = () => {
  return (
    <div>
      <head>
        <link rel="stylesheet" href="index.css" />
      </head>
      <h1 className="text-xl font-bold border-b">You have a new Test Email on Productlane</h1>
      <p className="border-b">Something something</p>
      <a href="https://productlane.io/feedback" className="bg-purple-600">
        Open
      </a>
    </div>
  )
}

export function testMailer({ to }: IParams) {
  const emailHtml = ReactDOMServer.renderToStaticMarkup(<TestMail />)
  const processedHtml = juice(emailHtml, {
    webResources: {
      relativeTo: "../app/core/styles/",
    },
  })

// ...