Class-subset reference
Every Tailwind-subset utility SML supports, generated from the utility registry, plus the forbidden-utility list with client-specific reasons.
SML supports a fixed subset of Tailwind utility classes on every primitive's class
attribute, chosen for guaranteed rendering across Gmail, Outlook (classic and new),
Apple Mail, and Yahoo. Anything outside this subset is a compile error naming the
class and the reason, not a silent drop.
Two variants are supported: sm: (progressive enhancement above a mobile baseline)
and dark: (color-only, honored by clients that support prefers-color-scheme);
see Responsive and dark-mode variants.
Padding
| Class | Description |
|---|---|
p-* | Padding on all sides (p-4 = 16px). Compiles onto table cells for Outlook. |
px-* | Horizontal padding. |
py-* | Vertical padding. |
pt-* | Top padding. |
pr-* | Right padding. |
pb-* | Bottom padding. |
pl-* | Left padding. |
Margin
| Class | Description |
|---|---|
m-* | Margin on all sides. Warn tier, some clients strip margins. Fix: Margin is stripped by some clients (Outlook.com dark mode, some webmail); prefer padding or <Spacer>. |
mx-* | Horizontal margin; mx-auto centers block elements. Fix: Margin is stripped by some clients (Outlook.com dark mode, some webmail); prefer padding or <Spacer>. |
my-* | Vertical margin. Fix: Margin is stripped by some clients (Outlook.com dark mode, some webmail); prefer padding or <Spacer>. |
mt-* | Top margin. Fix: Margin is stripped by some clients (Outlook.com dark mode, some webmail); prefer padding or <Spacer>. |
mr-* | Right margin. Fix: Margin is stripped by some clients (Outlook.com dark mode, some webmail); prefer padding or <Spacer>. |
mb-* | Bottom margin. Fix: Margin is stripped by some clients (Outlook.com dark mode, some webmail); prefer padding or <Spacer>. |
ml-* | Left margin. Fix: Margin is stripped by some clients (Outlook.com dark mode, some webmail); prefer padding or <Spacer>. |
Sizing
| Class | Description |
|---|---|
w-* | Width from the spacing scale (w-32 = 128px), w-full, or w-[600px]/w-[50%]. |
max-w-* | Max width from the container scale (max-w-lg = 512px) or max-w-[600px]. |
h-* | Height from the spacing scale (h-12 = 48px) or h-[80px]. |
Typography
| Class | Description |
|---|---|
text-* | Font size with its paired line-height (text-sm = 14px/20px). |
text-* | Text alignment: text-left, text-center, text-right. |
text-* | Text color from the palette (text-gray-700) or text-[#374151]. |
leading-* | Line height: named ratios (leading-relaxed) or spacing steps (leading-6 = 24px). |
tracking-* | Letter spacing: tracking-tighter … tracking-widest (em-based; inlines fine in Outlook). Pair tracking-wide/wider with uppercase for eyebrows. |
font-* | Font weight: font-normal, font-medium, font-semibold, font-bold, ... |
font-* | Font stack: font-sans, font-serif, font-mono. |
uppercase | Uppercase text transform. |
underline | Underlined text. |
no-underline | Removes the underline (links render underlined by default in most clients). |
Color
| Class | Description |
|---|---|
bg-* | Background color from the palette (bg-white, bg-blue-600) or bg-[#0088cc]. |
Background gradient
| Class | Description |
|---|---|
bg-gradient-* | Linear gradient background for hero sections: bg-gradient-to-b/t/l/r with from-{color} and to-{color}. Modern base compiles a CSS linear-gradient (plus a solid from-color fallback); the outlook-safe base degrades to the solid from-color, Outlook for Windows never renders the gradient. |
from-* | Gradient start color (from-indigo-600). Doubles as the solid fallback color on clients without gradient support (Outlook for Windows). |
to-* | Gradient end color (to-purple-600). |
Border
| Class | Description |
|---|---|
border-* | Solid border width: border (1px), border-2, border-0. |
border-* | Border color from the palette (border-gray-200). |
rounded-* | Border radius (rounded-md = 6px). Ignored by Outlook for Windows, buttons degrade to square corners. |
Display
| Class | Description |
|---|---|
block | display: block. |
inline-block | display: inline-block. |
hidden | display: none. Pair with sm:block for mobile-only content. |
Forbidden utilities
These compile to a typed error naming the failing client and the recommended alternative. The compiler drops the feature rather than ship something that silently breaks in that client.
| Class | Why it's rejected |
|---|---|
flex | display:flex is unsupported in Outlook for Windows (Word engine), use <Row>/<Column> |
inline-flex | display:inline-flex is unsupported in Outlook for Windows, use <Row>/<Column> |
grid | display:grid is unsupported in Outlook for Windows and Gmail, use <Row>/<Column> |
inline-grid | display:inline-grid is unsupported in Outlook for Windows, use <Row>/<Column> |
gap- | gap requires flex/grid, unsupported in Outlook for Windows, use padding on <Column> |
space- | space-* margins require selectors Gmail strips, use padding or <Spacer> |
items- | flexbox alignment is unsupported in Outlook for Windows, use <Row>/<Column> |
justify- | flexbox alignment is unsupported in Outlook for Windows, use <Row>/<Column> and text-center |
self- | flexbox alignment is unsupported in Outlook for Windows, use <Row>/<Column> |
content- | flexbox alignment is unsupported in Outlook for Windows, use <Row>/<Column> |
order- | flex order is unsupported in Outlook for Windows, reorder the source instead |
absolute | CSS position is ignored by Gmail and Outlook, use nested <Section>s |
relative | CSS position is ignored by Gmail and Outlook, use nested <Section>s |
fixed | CSS position is ignored by Gmail and Outlook, use nested <Section>s |
sticky | CSS position is ignored by Gmail and Outlook, use nested <Section>s |
static | CSS position is ignored by Gmail and Outlook, remove it |
inset- | position offsets are ignored by Gmail and Outlook, use padding |
top- | position offsets are ignored by Gmail and Outlook, use padding |
right- | position offsets are ignored by Gmail and Outlook, use padding |
bottom- | position offsets are ignored by Gmail and Outlook, use padding |
left- | position offsets are ignored by Gmail and Outlook, use padding |
z- | z-index is ignored by Gmail and Outlook, remove it |
float- | float is unreliable across email clients, use <Row>/<Column> |
shadow | box-shadow is unsupported in Outlook for Windows and Gmail, use a border instead |
shadow- | box-shadow is unsupported in Outlook for Windows and Gmail, use a border instead |
opacity- | opacity is unsupported in Outlook for Windows, bake the tint into the color |
transform | CSS transforms are unsupported in email clients, remove them |
rotate- | CSS transforms are unsupported in email clients, remove them |
scale- | CSS transforms are unsupported in email clients, remove them |
translate- | CSS transforms are unsupported in email clients, remove them |
skew- | CSS transforms are unsupported in email clients, remove them |
transition | transitions don't run in email, remove them |
transition- | transitions don't run in email, remove them |
duration- | transitions don't run in email, remove them |
animate- | animations don't run in email, remove them |
blur- | CSS filters are unsupported in most email clients, remove them |
brightness- | CSS filters are unsupported in most email clients, remove them |
grayscale | CSS filters are unsupported in most email clients, remove them |
grayscale- | CSS filters are unsupported in most email clients, remove them |
truncate | text truncation is unsupported in Outlook for Windows, shorten the copy |
line-clamp- | line clamping is unsupported in email clients, shorten the copy |
aspect- | aspect-ratio is unsupported in Outlook and Gmail, set width/height on <Image> |
overflow- | overflow is unreliable across email clients, restructure the layout |
Arbitrary values
Most families accept an arbitrary value in brackets: w-[320px], bg-[#0088cc],
max-w-[600px]. Arbitrary values that reference var(), calc(), oklch(),
rgb()/rgba(), or hsl() are rejected: compiled email has no CSS custom
properties, and alpha channels render solid black in Outlook for Windows. Use a
literal hex color or px value instead.