Giters

soheilpro / mailwind

Use Tailwind CSS to design HTML emails.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Don't understand usage

lohnsonok opened this issue · comments

commented

Please help for more documentation

commented

I can update with how I successfully made it work. Maybe @soheilpro can reference this also in the readme.

  1. Copy the dist/mailwind.css file to the root of your project and import it in your HTML file.
  2. Style your HTML page using tailwind utility classes
  3. Install juice globally.
    npm install juice -g
    This will help in changing tailwind utility classes to inline styling which works for emails.
    You can run it in code or as a CLI. The next steps make use of its CLI.
  4. Open a terminal in the root of your project. Assuming the name of the main HTML file is index.html, run
    juice index.html output.html
  5. File output.html can be used successfully in mails.

Note: I had some rendering issues on Gmail in which background colors were not applied correctly. If you experience this, in output.html file change all occurences of rgba(x,x,x,x) to its hex equivalent.

commented

Thank you. I'll update the readme.

commented

I have released Mailwind v2 with built-in inlining and better documentation. Let me know what you think.