tailwindcss-mso

tailwindcss-mso

A Tailwind CSS plugin that generates MSO utilities.

Useful when styling HTML emails with Tailwind CSS, like in Maizzle.

Installation

npm i tailwindcss-mso

Usage

In your tailwind.config.js:

module.exports = {
  plugins: [
    require('tailwindcss-mso'),
  ],
};

You can now use the classes in your HTML:

<p class="mso-line-height-rule-exactly">...</p>

Generated utilities

The plugin generates both default utilities and utilities based on your Tailwind config.

Spacing utilities

These utilities are all based on your theme.spacing scale:

• mso-line-height-alt
• mso-text-indent-alt
• mso-table-lspace
• mso-table-rspace
• mso-padding-alt
• mso-margin-alt
• mso-text-raise
• mso-font-width

All of these also include negative versions.

Color utilities

These utilities are all based on your theme.colors config:

• mso-color-alt
• mso-highlight
• text-underline-color

Font utilities

These utilities are all based on your theme.fontSize config:

• mso-ansi-font-size
• mso-bidi-font-size

Additionally, these default values are also included for each utility: large, larger, medium, small, smaller, x-large, x-small, xx-large, xx-small.

Default utilities

The plugin also generates these utilities with default values:

mso-ansi-font-style

italic, normal, oblique

mso-ansi-font-weight

lighter, normal, bold, bolder

mso-ascii-font-family

auto, cursive, fantasy, monospace, sans-serif, serif

mso-bidi-flag

on, off

mso-bidi-font-style

italic, normal, oblique

mso-bidi-font-weight

lighter, normal, bold, bolder

mso-bidi-font-family

auto, cursive, fantasy, monospace, sans-serif, serif

mso-highlight

auto, windowtext

mso-generic-font-family

auto, decorative, modern, roman, script, swiss

mso-element-frame-width

auto

mso-element

comment, comment-list, dropcap-dropped, dropcap-in-margin, endnote, endnote-continuation-notice, endnote-continuation-separator, endnote-list, endnote-separator, field-begin, field-end, field-separator, footer, footnote, footnote-continuation-notice, footnote-continuation-separator, footnote-list, footnote-separator, frame, header, none, paragraph-mark-properties, table-head

mso-element-left

center, inside, left, outside, right

mso-hide

all, none, screen

mso-color-alt

auto, windowtext

mso-line-height-rule

at-least, exactly

mso-line-height-alt

normal

To see all the classes generated by this plugin, check out the test file.

!important

The plugin does not respect the important key in your config, as this may cause issues in Outlook when CSS is inlined.