https://github.com/soheilpro/mailwind
Skip to content
Sign up
* Why GitHub?
+ Features
+ Mobile
+ Actions
+ Codespaces
+ Packages
+ Security
+ Code review
+ Issues
+ Integrations
+ GitHub Sponsors
+ Customer stories
* Team
* Enterprise
* Explore
+ Explore GitHub
+ Learn and contribute
+ Topics
+ Collections
+ Trending
+ Learning Lab
+ Open source guides
+ Connect with others
+ The ReadME Project
+ Events
+ Community forum
+ GitHub Education
+ GitHub Stars program
* Marketplace
* Pricing
+ Plans
+ Compare plans
+ Contact Sales
+ Education
[ ]
*
#
In this repository All GitHub |
Jump to |
* No suggested jump to results
*
#
In this repository All GitHub |
Jump to |
*
#
In this user All GitHub |
Jump to |
*
#
In this repository All GitHub |
Jump to |
Sign in
Sign up
{{ message }}
soheilpro / mailwind Public
* Notifications
* Fork 13
* Star 628
*
Use Tailwind CSS to design HTML emails.
MIT License
628 stars 13 forks
Star
Notifications
* Code
* Issues 0
* Pull requests 0
* Actions
* Projects 0
* Wiki
* Security
* Insights
More
* Code
* Issues
* Pull requests
* Actions
* Projects
* Wiki
* Security
* Insights
This commit does not belong to any branch on this repository, and may
belong to a fork outside of the repository.
master
Switch branches/tags
[ ]
Branches Tags
Could not load branches
Nothing to show
{{ refName }} default View all branches
Could not load tags
Nothing to show
{{ refName }} default
View all tags
1 branch 7 tags
Code
Latest commit
@soheilpro
soheilpro Bump version to v2.0.3
...
a47bd33 Feb 3, 2022
Bump version to v2.0.3
a47bd33
Git stats
* 7 commits
Files
Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
Fix running on Windows
Feb 3, 2022
.gitignore
Genesis
Aug 5, 2021
LICENSE
Genesis
Aug 5, 2021
README.md
Update description
Feb 3, 2022
package-lock.json
v2
Feb 3, 2022
package.json
Bump version to v2.0.3
Feb 3, 2022
View code
[ ]
Mailwind Install Usage Options Note Example Version History Author
Copyright and License
README.md
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:
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:
.text-lg {
font-size: 18px
}
.font-bold {
font-weight: 700
}
Welcome
Version History
* 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.
About
Use Tailwind CSS to design HTML emails.
Topics
email html-email tailwind tailwindcss
Resources
Readme
License
MIT License
Stars
628 stars
Watchers
6 watching
Forks
13 forks
Languages
* JavaScript 99.6%
* CSS 0.4%
* (c) 2022 GitHub, Inc.
* Terms
* Privacy
* Security
* Status
* Docs
* Contact GitHub
* Pricing
* API
* Training
* Blog
* About
You can't perform that action at this time.
You signed in with another tab or window. Reload to refresh your
session. You signed out in another tab or window. Reload to refresh
your session.