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:

``sh
npm install -D tailwindcss-email-variants
`

Then add the plugin to your tailwind.config.js file:

`js
/* @type {import('tailwindcss').Config} /
module.exports = {
// ...
plugins: [
require('tailwindcss-email-variants'),
],
}
`

Usage

Use the available variants to generate utilities that target specific email clients.

$3

Use the gmail variant to target Gmail's webmail:

`html



`

Result:

`css
u + .body .gmail\:hidden {
display: none;
}
`

$3

Use the gmail-android variant to target Gmail on Android devices:

`html



`

Result:

`css
div > u + .body .gmail-android\:hidden {
display: none;
}
`

$3

Use the apple-mail variant to target Apple Mail 10 and up:

`html



`

Result:

`css
.Singleton .apple-mail\:hidden {
display: none;
}
`

$3

Use the ios variant to target iOS Mail 10 and up:

`html



`

Result:

`css
@supports (-webkit-overflow-scrolling:touch) and (color:#ffff) {
.ios\:hidden {
display: none;
}
}
`

$3

Use the ios-15 variant to target iOS Mail 15 specifically:

`html



`

Result:

`css
@supports (-webkit-overflow-scrolling:touch) and (aspect-ratio: 1 / 1) {
.ios-15\:hidden {
display: none;
}
}
`

$3

Change color and background-color of elements in Outlook.com dark mode.

`html







`

Result:

`css
[data-ogsc] .ogsc\:text-slate-200 {
color: #e2e8f0;
}

[data-ogsb] .ogsb\:bg-slate-900 {
background-color: #0f172a;
}
`

$3

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.

`html



`

Result:

`css
.ox\:hidden[class^="ox-"] {
display: none;
}
``

[github-ci]: https://github.com/maizzle/tailwindcss-email-variants/actions
[github-ci-shield]: https://github.com/maizzle/tailwindcss-email-variants/actions/workflows/nodejs.yml/badge.svg
[license]: ./LICENSE
[license-shield]: https://img.shields.io/github/license/maizzle/tailwindcss-email-variants?color=0e9f6e