Tailwind CSS for HTML emails.

Related tags

Validation email html-email tailwind tailwindcss
Overview

Mailwind

Tailwind CSS for HTML emails.

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

Usage

  1. Copy the dist/mailwind.css file to your project.
  2. Use the Tailwind utility classes in your HTML email like you normally would for the web.
  3. Run your HTML email through a CSS inliner tool (like Juice).

How It Works?

This project configures Tailwind to generate a CSS file that includes all the available utility classes, but tailored for use in emails:

  • All the units are changed to pixel.
  • All the variants (like hover: and focus:) and responsive breakpoints (like sm: and md:) are removed since they can't be inlined.

Building

If you make any changes to the config file, run the following command to generate the CSS file again:

npm run build

Version History

  • 1.0
    • Initial release.

Author

Soheil Rashidi

Copyright and License

Copyright 2021 Soheil Rashidi.

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.

Comments
  • fix: resolve tailwind cli correctly

    fix: resolve tailwind cli correctly

    The expected tailwind cli might not be at the exact location when mailwind is installed locally or with pnpm. It should be resolved in node.js native way.

    opened by Songkeys 3
  • Instructions on how to add mailwind as a local dependency

    Instructions on how to add mailwind as a local dependency

    Hi there,

    I am using mailwind as part of my CI pipeline for a project and I think other devs would be interested in having it run as a local dependency as well.

    I've added some additional instructions on the README.md for such a purpose.

    Hopefully this is okay with you.

    • JP
    opened by jpcaparas 3
  • Update dependencies version and fix missing tailwind directives

    Update dependencies version and fix missing tailwind directives

    With this PR, I have updated the package dependencies to their latest versions. Furthermore, I noticed that many styles were not included (maybe this is the cause for #11) that is why I have updated style.css as per the latest tailwind specifications.

    opened by alexferrari88 2
  • How to make this work?

    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/",
    },
  })

// ...
    opened by ospfranco 2
  • Allow the usage of conditional breakpoint styling

    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?

    opened by Prutheus 1
  • Currently requires all of the project's PostCSS plugins to be installed globally... why?

    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.

    opened by crock 1
  • Custom Font CSS from tailwind.config.js

    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.

    opened by mv-stns 1
Owner
Soheil Rashidi
Soheil Rashidi
GitHub
Reading emails from Gmail provider using Node.js along with Google API

?? Project summary Reading emails from Gmail provider using Node.js along with Google API (study only). ?? Technologies Project was built using Node.j

Jhony Walker 2 Jan 8, 2022
[DISCONTINUED] jQuery plugin that makes it easy to validate user input while keeping your HTML markup clean from javascript code.

jQuery Form Validator [DISCONTINUED] Validation framework that let's you configure, rather than code, your validation logic. I started writing this pl

Victor Jonsson 976 Dec 30, 2022
jQuery library to validate html forms. compatible with bootstrap v4 and bootstrap v3

jQuery form validation jQuery form validation is a library that helps you to validate your HTML form, it's completable with both Bootstrap 3 and Boots

Bassam Nabriss 33 Jun 10, 2021
JQuery-TableToExcel - Light weight jQuery plugin for export HTML table to excel file

tableToExcel Light weight jQuery plugin for export table to excel file Demos Website and demo here: http://tanvirpro.com/all_project/jQueryTableToExce

Tanvir Sarker 4 May 8, 2022
Easy HTML Form Validator

Easy HTML Form Validator

Ali Nazari 314 Dec 26, 2022
Facile is an HTML form validator that is inspired by Laravel's validation style and is designed for simplicity of use.

Facile is an HTML form validator that is inspired by Laravel's validation style and is designed for simplicity of use.

upjs 314 Dec 26, 2022
HTML 5 & Bootstrap Jquery Form Validation Plugin

HTML 5 & Bootstrap Jquery Form Validation Plugin HTML 5 & Bootstrap 5 & Jquery 3 jbvalidator is a fresh new jQuery based form validation plugin that i

null 37 Dec 6, 2022
This Login Form made using React hooks , React Js , Css, Json. This form have 3 inputs, it also validate those inputs & it also having length limitations.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Yogesh Sharma 0 Jan 3, 2022
Tailwind CSS for HTML emails.

Mailwind Tailwind CSS for HTML emails. Tailwind makes it very easy to design websites, why not use it to design HTML emails? I've been using this at v

Soheil Rashidi 2.8k Jan 2, 2023
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Convert a simple HTML syntax into tables compatible with Foundation for Emails.

Inky Inky is an HTML-based templating language that converts simple HTML into complex, responsive email-ready HTML. Designed for Foundation for Emails

Foundation 652 Dec 22, 2022
⏪ Rewinds – Remix Tailwind Starter Kit with Tailwind CSS, Headless UI, Radix UI, and more

⏪ Rewinds – Remix Tailwind Starter Kit Rewinds is a Remix starter kit with Tailwind CSS v3 family of libraries. This is an example demo to combine the

M Haidar Hanif 81 Dec 24, 2022
Keep your sensitive information out of chat logs, emails, and more with heavily encrypted secrets.

Free encrypted secret sharing for everyone! This application is to be used to share encrypted secrets cross organizations, or as private persons. Hemm

Hemmelig 246 Dec 31, 2022
A Gmail Clone which built with ReactJS and Redux. You can sign in with your Google Account, compose a new e-mail and send realtime emails to the project.

Gmail Clone with ReactJS A Gmail Clone that you can sign in with your Google Account, compose a new e-mail and send realtime emails to the project. Cl

Özge Coşkun Gürsucu 49 Nov 14, 2022
DiscordEmailVerifier - Quickly verify emails on your tokens for completely free using mail.tm's api.

DiscordEmailVerifier Quickly verify emails on your tokens for completely free using mail.tm's api. /* ❗ No, this code doesn't verify the email for you

eric 3 Jun 7, 2022
Reading emails from Gmail provider using Node.js along with Google API

?? Project summary Reading emails from Gmail provider using Node.js along with Google API (study only). ?? Technologies Project was built using Node.j

Jhony Walker 2 Jan 8, 2022
Knwl.js is a Javascript library that parses through text for dates, times, phone numbers, emails, places, and more.

Knwl.js Knwl.js is a Javascript library that parses through text for dates, times, phone numbers, emails, places, and more. Project Future The future

Ben Moore 5.3k Jan 1, 2023
An utility to monitor changes in websites and send emails when found.

website-check An utility to monitor changes in websites and send emails when found. Usage: $ npm i -g website-check $ website-check /path/to/config.js

Cheng Zhao 5 Mar 21, 2022