tailwindcss-email-variants
v3.0.2
Published
Tailwind CSS variants for email client CSS targeting hacks
Downloads
37,672
Maintainers
Readme
A Tailwind CSS plugin that provides variants for email client targeting hacks used in HTML emails.
All variants are based on targeting hacks from howtotarget.email
Installation
Install the plugin from npm:
npm install -D tailwindcss-email-variants
Then add the plugin to your tailwind.config.js
file:
/** @type {import('tailwindcss').Config} */
module.exports = {
// ...
plugins: [
require('tailwindcss-email-variants'),
],
}
Usage
Use the available variants to generate utilities that target specific email clients.
Gmail
Use the gmail
variant to target Gmail's webmail:
<div class="gmail:hidden">...</div>
Result:
u + .body .gmail\:hidden {
display: none;
}
Gmail (Android)
Use the gmail-android
variant to target Gmail on Android devices:
<div class="gmail-android:hidden">...</div>
Result:
div > u + .body .gmail-android\:hidden {
display: none;
}
Apple Mail (10+)
Use the apple-mail
variant to target Apple Mail 10 and up:
<div class="apple-mail:hidden">...</div>
Result:
.Singleton .apple-mail\:hidden {
display: none;
}
iOS Mail (10+)
Use the ios
variant to target iOS Mail 10 and up:
<div class="ios:hidden">...</div>
Result:
@supports (-webkit-overflow-scrolling:touch) and (color:#ffff) {
.ios\:hidden {
display: none;
}
}
iOS Mail (15)
Use the ios-15
variant to target iOS Mail 15 specifically:
<div class="ios-15:hidden">...</div>
Result:
@supports (-webkit-overflow-scrolling:touch) and (aspect-ratio: 1 / 1) {
.ios-15\:hidden {
display: none;
}
}
Outlook.com dark mode
Change color
and background-color
of elements in Outlook.com dark mode.
<!-- Color -->
<div class="ogsc:text-slate-200">...</div>
<!-- Background color -->
<div class="ogsb:bg-slate-900">...</div>
Result:
[data-ogsc] .ogsc\:text-slate-200 {
color: #e2e8f0;
}
[data-ogsb] .ogsb\:bg-slate-900 {
background-color: #0f172a;
}
Open-Xchange
Use the ox
variant to target webmail clients that are powered by Open-Xchange.
Some of these email clients include Comcast, Libero, 1&1 MailXchange, Network Solutions Secure Mail, Namecheap Email Hosting, Mailbox.org, 123-reg Email, Acens Correo Professional, Home.pl Cloud Email Xchange, Virgin Media Mail, and Ziggo Mail.
<div class="ox:hidden">...</div>
Result:
.ox\:hidden[class^="ox-"] {
display: none;
}