tailwindcss-email-variants
A 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:
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('tailwindcss-email-variants'),
// ...
],
}
Usage
Use the available variants to generate utilities that target specific email clients, or configure it with your own variants.
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 (webmail)
Use the outlook-web
variant to target iOS Mail 15 specifically:
<div class="outlook-web:hidden">...</div>
Result:
[class~="x_outlook-web\: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;
}
Configuration
You can add your own variants by passing a configuration object to the plugin.
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-email-variants')({
thunderbird: '.moz-text-html &', // & is the utility class
example: ctx => `.example ${ctx.container.nodes[0].selector}` // using a function
}),
// ...
],
}
Use it:
<div class="thunderbird:hidden example:flex">...</div>
Result:
.moz-text-html .thunderbird\:hidden {
display: none;
}
.example .flex {
display: flex;
}
build(deps-dev): bump jest from 28.1.3 to 29.1.2
Bumps jest from 28.1.3 to 29.1.2.
Release notes
Sourced from jest's releases.
... (truncated)
Changelog
Sourced from jest's changelog.
... (truncated)
Commits
3c31dd6
v29.1.2fd9cd90
v29.1.151f1030
v29.1.077f865d
v29.0.3616fcf5
v29.0.2132e815
chore: update to TypeScript 4.8 (#13177)b959a3d
v29.0.186de0cb
chore: updatejest-runner-tsd
(#13179)75006e4
v29.0.04def94b
v29.0.0-alpha.6Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)build(deps-dev): bump prettier from 2.7.1 to 2.8.0
Bumps prettier from 2.7.1 to 2.8.0.
Release notes
Sourced from prettier's releases.
Changelog
Sourced from prettier's changelog.
Commits
dcc0623
Release 2.8.07f74981
Remove version validattion temp876c297
Update changelog forsatisfies
(#13879)fd37600
Update@typescript-eslint/typescript-estree
to supportsatisfies
(#13872)fac8761
Build(deps): Bump minimatch from 3.0.4 to 3.1.2 in /scripts/release (#13854)68ea881
Update typescript to v4.9 (#13852)5e0b883
Fix generate truncate comment (backport #13437) (#13814)a980caa
Add missing changelog for #13016 (#13812)520dbcd
Add changelog for #13783 (#13811)ae4d85a
Update description ofvueIndentScriptAndStyle
option (#13781)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)build(deps-dev): bump jest from 28.1.3 to 29.0.3
Bumps jest from 28.1.3 to 29.0.3.
Release notes
Sourced from jest's releases.
... (truncated)
Changelog
Sourced from jest's changelog.
... (truncated)
Commits
77f865d
v29.0.3616fcf5
v29.0.2132e815
chore: update to TypeScript 4.8 (#13177)b959a3d
v29.0.186de0cb
chore: updatejest-runner-tsd
(#13179)75006e4
v29.0.04def94b
v29.0.0-alpha.663e506b
v29.0.0-alpha.598a833b
v29.0.0-alpha.40998187
v29.0.0-alpha.3Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)build(deps-dev): bump jest from 28.1.3 to 29.0.2
Bumps jest from 28.1.3 to 29.0.2.
Release notes
Sourced from jest's releases.
... (truncated)
Changelog
Sourced from jest's changelog.
... (truncated)
Commits
616fcf5
v29.0.2132e815
chore: update to TypeScript 4.8 (#13177)b959a3d
v29.0.186de0cb
chore: updatejest-runner-tsd
(#13179)75006e4
v29.0.04def94b
v29.0.0-alpha.663e506b
v29.0.0-alpha.598a833b
v29.0.0-alpha.40998187
v29.0.0-alpha.302cd85f
chore: migrate fromlerna
tolerna-lite
(#13097)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)build(deps-dev): bump jest from 28.1.3 to 29.0.1
Bumps jest from 28.1.3 to 29.0.1.
Release notes
Sourced from jest's releases.
... (truncated)
Changelog
Sourced from jest's changelog.
Commits
b959a3d
v29.0.186de0cb
chore: updatejest-runner-tsd
(#13179)75006e4
v29.0.04def94b
v29.0.0-alpha.663e506b
v29.0.0-alpha.598a833b
v29.0.0-alpha.40998187
v29.0.0-alpha.302cd85f
chore: migrate fromlerna
tolerna-lite
(#13097)10f1e7f
v29.0.0-alpha.16862afb
v29.0.0-alpha.0Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)build(deps-dev): bump postcss from 8.4.19 to 8.4.20
Bumps postcss from 8.4.19 to 8.4.20.
Release notes
Sourced from postcss's releases.
Changelog
Sourced from postcss's changelog.
Commits
1d4c509
Release 8.4.20 version905082a
Add Node.js 10 to CI20122e5
Fix childless at-rule map generationff7e8ce
Merge pull request #1801 from romainmenke/invalid-sourcemap-with-at-layer--pr...d585976
Fix CI744b15f
Update dependenciesdb935f1
invalid sourcemap with at layer3cac84a
Fix type tests5113edb
Update dependenciesDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)build(deps-dev): bump prettier from 2.7.1 to 2.8.1
Bumps prettier from 2.7.1 to 2.8.1.
Release notes
Sourced from prettier's releases.
Changelog
Sourced from prettier's changelog.
... (truncated)
Commits
cd1df1a
Release 2.8.15541a63
Remove version validation1cf760a
Support decorator auto accessors syntax (#13919)aa34209
test: format instantiation expr in logical expr (#13897)957b4f2
Build(deps): Bump decode-uri-component from 0.2.0 to 0.2.2 in /website (#13933)e4240ae
Add tests for keyword class property (#13927)655a161
Add tests for multiple comments (#13890)4a1e32a
Fixed scss function arguments on different lines in maps #9128 (#9184)38806fe
Migrate from probot/no-response to lee-dohm/no-response (#13891)a60bee2
Add '--single-attribute-per-line' option to Playground (#13587)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)build(deps-dev): bump postcss from 8.4.18 to 8.4.19
Bumps postcss from 8.4.18 to 8.4.19.
Release notes
Sourced from postcss's releases.
Changelog
Sourced from postcss's changelog.
Commits
c26baf3
Release 8.4.19 versioned5103d
Update dependencies8086ea3
Merge pull request #1790 from romainmenke/fix-whitespace-bug--passionate-afri...4b38845
fix whitespace bugcf9425a
Merge pull request #1789 from eduardopilati/patch-1ca04e0a
Update plugins.mdfe63768
Update dependencies3b6ba56
Add Node.js 19Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)build(deps-dev): bump tailwindcss from 3.2.2 to 3.2.4
Bumps tailwindcss from 3.2.2 to 3.2.4.
Release notes
Sourced from tailwindcss's releases.
Changelog
Sourced from tailwindcss's changelog.
Commits
f2f1ee9
3.2.413eb1e2
update changelog22d45dd
Update CHANGELOG.md602101d
Allow users to block generation of certain utilities (#9812)4ccc0fa
Make sure errors are always displayed when watching for changes (#9810)1482c75
Fix watching of files on Linux when renames are involved (#9796)757a8d6
update changelog6166e59
3.2.38a2f9ed
Fix !important selectors not being classified as valid class inside safelist ...6bd9912
Only sort pseudo elements after classes when using@apply
and variants (#9765)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)build(deps-dev): bump tailwindcss from 3.2.1 to 3.2.2
Bumps tailwindcss from 3.2.1 to 3.2.2.
Release notes
Sourced from tailwindcss's releases.
Changelog
Sourced from tailwindcss's changelog.
Commits
763fdde
3.2.2a5b6ec2
update changelog260e392
Update cssnano to version 5.1.1430d2595
Update autoprefixer to version 10.4.13226be11
update changelogaa979d6
ensure we fallback to''
for backwards compatibility reasonsbf28bf6
Fix cannot read properties of undefined (reading 'modifier') (#9656)0a4ae77
Fix not rebuilding files whenrename
event is emit (#9689)d33b650
Fix incorrect selectors when using@apply
in selectors with combinators and...c10ba4e
Fix fractional values not being parsed properly inside arbitrary properties (...Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)build(deps-dev): bump tailwindcss from 3.1.8 to 3.2.1
Bumps tailwindcss from 3.1.8 to 3.2.1.
Release notes
Sourced from tailwindcss's releases.
... (truncated)
Changelog
Sourced from tailwindcss's changelog.
... (truncated)
Commits
547f9f6
3.2.18967a51
update changelog726b023
update changelog0bbca33
ensure we also check wether the modifier exists in the modifiers object1445aaf
Ensuremicromatch
is a proper CLI dependency (#9620)3c7fc69
Workflow improvements (#9609)40f6b4f
Fix missing PostCSS dependencies in the CLI (#9617)4dfb1e3
Fix missingsupports
in types (#9616)2faf86f
Resolve broken relative logo sources on npmjs (relative → absolute) (#9610)1dc4a76
increase jest test timeoutDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)build(deps-dev): bump np from 7.6.2 to 7.6.3
Bumps np from 7.6.2 to 7.6.3.
Release notes
Sourced from np's releases.
Commits
9fb0128
7.6.30f5dd33
Fix npm 9 compatibility (#666)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)