Tailwind CSS 4 configuration for HTML emails
This package exports a Tailwind CSS 4 configuration file that can be used to make the CSS output more email client-friendly. The output will still contain modern CSS syntax, so it needs lowering with a tool like Lightning CSS.
First, install the package:
``sh`
npm install @maizzle/tailwindcss
Then, import it in your project's CSS file:
`css`
@import '@maizzle/tailwindcss';
You may also import individual configurations:
`css`
@import '@maizzle/tailwindcss/mso';
@import '@maizzle/tailwindcss/clients';
@import '@maizzle/tailwindcss/theme/colors';
@import '@maizzle/tailwindcss/theme/text';
@import '@maizzle/tailwindcss/theme/shadows';
@import '@maizzle/tailwindcss/theme/filters';
@import '@maizzle/tailwindcss/theme/spacing';
@import '@maizzle/tailwindcss/theme/borders';
Note: for Tailwind CSS Intellisense to work, make sure you import this package in an actual .css file in your project.
The following namespaces are customized by this package:
- --breakpoint-* - breakpoints are reset and only include xs and sm
- - spacing utilities use a px scale instead of rem
- - oklch colors have been replaced with their HEX equivalents--text-*
- - font sizes use a px spacing scale instead of rem
- - font families are set to use custom font stacks that are more compatible with email clients--shadow-*
- - custom shadow utilties--blur-*
- - custom filter utilities--animate-*
- borders - custom border radius utilities
- - this namespace is disabled
The package registers a few custom variants:
- sm - max-width: 600pxxs
- - max-width: 430px
The hover: variant has been overridden to use a :hover pseudo-class instead of a @media query, just like in Tailwind CSS v3.
The config includes variants for targeting specific email clients. These can be used to apply styles conditionally based on the client.
- Airmail - airmail:
- Apple Mail
- to target Apple Mail 10apple-mail:
- to target Apple Mail 12 and latercomcast:
- Comcast -
- Edison (iOS, Android) -
- Freenet -
- Gmail (web, Android, iPad)
- to target Gmail webgmail-android:
- to target Gmail Androidgmail-ipad:
- to target Gmail on the iPadios-10:
- iOS Mail
- to target iOS 10ios-13:
- to target iOS 13ios-15:
- to target iOS 15 and laternotion:
- Notion -
- Open-Xchange -
- Outlook
- to target Outlook on Macoutlook-android:
- to target Outlook on Androidogsc:
- and ogsb: to target Outlook webmail and iOS dark modesspark:
- Spark -
- Superhuman -
- Thunderbird -
- Yahoo! Mail -
The configuration includes an extensive set of MSO (Microsoft Office) utilities that can be used to style emails in specific versions of Outlook (2007-2021), which use the Word rendering engine.
These utilities are prefixed with mso- and can be used in your HTML like so:
`html``