Tailwindcss-mso NPM

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>

Options

You may pass options to configure how the plugin generates utilities.

respectImportant

Type: Boolean\ Default: false

By default, the plugin does not respect the important option from your Tailwind config, as this may cause issues in Outlook when CSS is inlined.

You may force it to generate !important utilities by setting this to true:

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

Result:

<p class="mso-hide-all">...</p>

.mso-hide-all {
  mso-hide: all !important;
}

Arbitrary values

The plugin supports arbitrary values:

<p class="mso-text-raise-[20px]">...</p>

.mso-text-raise-\[20px\] {
  mso-text-raise: 20px;
}

Negative values

Negative values are also supported, just as you'd expect:

<p class="-mso-text-raise-4">...</p>

.-mso-text-raise-4 {
  mso-text-raise: -16px;
}

Generated utilities

The plugin generates both utilities that have default values, as well as utilities based on your Tailwind CSS configuration.

Spacing utilities

These utilities also work with values from your theme.spacing scale:

mso-line-height-alt
mso-text-indent-alt
mso-padding-alt (+ variations)
mso-margin-alt (+ variations)
mso-para-margin (+ variations)
mso-text-raise
mso-font-width
mso-element-top, mso-element-left
mso-ansi-font-size, mso-bidi-font-size
mso-ansi-font-size, mso-bidi-font-size
mso-element-frame-width, mso-element-frame-height
mso-element-frame-vspace, mso-element-frame-hspace
mso-table-tspace, mso-table-rspace, mso-table-bspace, mso-table-lspace

Where it makes sense, these also support negative versions, like -mso-text-raise-20.

Color utilities

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

mso-color-alt
mso-highlight
text-underline-color
mso-shading
mso-shadow-color

Border utilities

Utilities for controlling the border styles of elements.

For border colors:

mso-border-alt
mso-border-between
mso-border-bottom-alt
mso-border-left-alt
mso-border-right-alt
mso-border-top-alt

For border widths:

mso-border-between-width
mso-border-width-alt
mso-border-bottom-width-alt
mso-border-left-width-alt
mso-border-right-width-alt
mso-border-top-width-alt

Others:

mso-border-bottom-source
mso-border-left-source
mso-border-right-source
mso-border-top-source
mso-border-shadow
mso-border-effect

Font utilities

These font size utilities work with values from your theme.spacing config:

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

Additionally, each utility also supports these values: large, larger, medium, small, smaller, x-large, x-small, xx-large, xx-small.

Other utilities

The plugin also generates the following utilities with default values:

mso-{ansi|bidi}-font-style

Values: italic, normal, oblique

mso-{ansi|bidi}-font-weight

Values: lighter, normal, bold, bolder

mso-{ascii|bidi|arabic}-font-family

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

mso-bidi-flag

Values: on, off

mso-highlight

Values: auto, windowtext (+ colors from your config)

mso-generic-font-family

Values: auto, decorative, modern, roman, script, swiss

mso-element-frame-{width|height}

Values: auto (+ values from your spacing scale)

mso-element

Values: 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