A Tailwind CSS plugin that generates MSO utilities.
Useful when styling HTML emails with Tailwind CSS, like in Maizzle.
npm i @diotoborg/ea-praesentium
In your tailwind.config.js
:
module.exports = {
plugins: [
require('@diotoborg/ea-praesentium'),
],
}
You can now use the classes in your HTML:
<p class="mso-line-height-rule-exactly">...</p>
You may pass options to configure how the plugin generates utilities.
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('@diotoborg/ea-praesentium')({
respectImportant: true,
}),
],
}
Result:
<p class="mso-hide-all">...</p>
.mso-hide-all {
mso-hide: all !important;
}
The plugin supports arbitrary values:
<p class="mso-text-raise-[20px]">...</p>
.mso-text-raise-\[20px\] {
mso-text-raise: 20px;
}
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;
}
The plugin generates both utilities that have default values, as well as utilities based on your Tailwind CSS configuration.
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
.
These utilities are all based on your theme.colors
config:
mso-color-alt
mso-highlight
text-underline-color
mso-shading
mso-shadow-color
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
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
.
The plugin also generates the following utilities with default values:
Values: italic
, normal
, oblique
Values: lighter
, normal
, bold
, bolder
Values: auto
, cursive
, fantasy
, monospace
, sans-serif
, serif
Values: on
, off
Values: auto
, windowtext
(+ colors from your config)
Values: auto
, decorative
, modern
, roman
, script
, swiss
Values: auto
(+ values from your spacing
scale)
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
Values: center
, inside
, left
, outside
, right
(+ values from your spacing
scale)
Values: bottom
, inside
, middle
, outside
, top
(+ values from your spacing
scale)
Values: all
, none
, screen
Values: at-least
, exactly
Values: normal
(+ values from your spacing
scale)