Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/soheilpro/mailwind
Use Tailwind CSS to design HTML emails.
https://github.com/soheilpro/mailwind
css email html html-email tailwind tailwindcss
Last synced: 3 days ago
JSON representation
Use Tailwind CSS to design HTML emails.
- Host: GitHub
- URL: https://github.com/soheilpro/mailwind
- Owner: soheilpro
- License: mit
- Created: 2021-08-04T17:58:24.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-11-06T20:08:36.000Z (about 1 year ago)
- Last Synced: 2025-01-02T10:03:08.182Z (10 days ago)
- Topics: css, email, html, html-email, tailwind, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 84 KB
- Stars: 3,199
- Watchers: 26
- Forks: 73
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - mailwind
- awesome - soheilpro/mailwind - Use Tailwind CSS to design HTML emails. (JavaScript)
- awesome-email-marketing - Mailwind
README
# 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](https://volt.fm) and [pikaso.me](https://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](./src/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](./src/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
Welcome
```
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:
```css
.text-lg {
font-size: 18px
}
.font-bold {
font-weight: 700
}
```
```html
Welcome
```
## Version History
+ **2.2**
+ Tailwind CSS is now a peer dependency so you can `npm install` newer versions if you need to (Thanks [Songkeys](https://github.com/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**
+ http://soheilrashidi.com
+ http://twitter.com/soheilpro
+ http://github.com/soheilpro
## Copyright and License
Copyright 2022 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.