tailwindcss-email-variants

    2.0.0 • Public • Published

    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.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;
    }

    Install

    npm i tailwindcss-email-variants

    DownloadsWeekly Downloads

    3,670

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    14.7 kB

    Total Files

    9

    Last publish

    Collaborators

    • cossssmin