@depup/react-email 6.9.3-depup.0 → 6.11.0-depup.0

package/dist/components/section/section.d.mts

@@ -2,6 +2,8 @@ import * as React$1 from "react";
 
 //#region src/components/section/section.d.ts
 type SectionProps = Readonly<React$1.ComponentPropsWithoutRef<'table'>>;
-declare const Section: React$1.ForwardRefExoticComponent<Readonly<Omit<React$1.DetailedHTMLProps<React$1.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">> & React$1.RefAttributes<HTMLTableElement>>;
+declare const Section: React$1.ForwardRefExoticComponent<Readonly<Omit<React$1.DetailedHTMLProps<React$1.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref">> & {
+  tdClassName?: string;
+} & React$1.RefAttributes<HTMLTableElement>>;
 //#endregion
 export { Section, SectionProps };

package/dist/components/section/section.mjs

@@ -2,14 +2,14 @@ import { markAsElement } from "../element-marker.mjs";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/section/section.tsx
-const Section = React$1.forwardRef(({ children, style = {}, ...props }, ref) => {
+const Section = React$1.forwardRef(({ children, style = {}, tdClassName, ...props }, ref) => {
 	const tdStyle = {};
 	const tableStyle = {};
 	const styleRecord = style;
 	for (const key in styleRecord) {
 		if (!Object.hasOwn(styleRecord, key)) continue;
 		const value = styleRecord[key];
-		if (key === "padding" || key === "paddingTop" || key === "paddingRight" || key === "paddingBottom" || key === "paddingLeft") tdStyle[key] = value;
+		if (key.startsWith("padding")) tdStyle[key] = value;
 		else tableStyle[key] = value;
 	}
 	return /* @__PURE__ */ jsx("table", {
@@ -23,12 +23,27 @@ const Section = React$1.forwardRef(({ children, style = {}, ...props }, ref) =>
 		ref,
 		style: tableStyle,
 		children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+			className: tdClassName,
 			style: tdStyle,
 			children
 		}) }) })
 	});
 });
 Section.displayName = "Section";
-markAsElement(Section);
+markAsElement(Section, { resolveTailwind(props, { style, className, classProperties }) {
+	const tableClasses = [];
+	const tdClasses = props.tdClassName ? [props.tdClassName] : [];
+	for (const name of className?.split(" ") ?? []) {
+		const properties = classProperties[name];
+		if (properties && properties.length > 0 && properties.every((property) => property.startsWith("padding"))) tdClasses.push(name);
+		else tableClasses.push(name);
+	}
+	return {
+		...props,
+		style,
+		className: tableClasses.length > 0 ? tableClasses.join(" ") : void 0,
+		tdClassName: tdClasses.length > 0 ? tdClasses.join(" ") : void 0
+	};
+} });
 //#endregion
 export { Section };

package/dist/components/tailwind/utils/tailwindcss/clone-element-with-inlined-styles.cjs

@@ -1,35 +1,48 @@
 const require_runtime = require("../../../../_virtual/_rolldown/runtime.cjs");
+const require_element_marker = require("../../../element-marker.cjs");
 const require_make_inline_styles_for = require("../css/make-inline-styles-for.cjs");
 const require_sanitize_class_name = require("../compatibility/sanitize-class-name.cjs");
 const require_is_component = require("../react/is-component.cjs");
 let react = require("react");
 react = require_runtime.__toESM(react, 1);
+let css_tree = require("css-tree");
 //#region src/components/tailwind/utils/tailwindcss/clone-element-with-inlined-styles.ts
 function cloneElementWithInlinedStyles(element, inlinableRules, nonInlinableRules, customProperties) {
-	const propsToOverwrite = {};
-	if (element.props.className && !require_is_component.isComponent(element)) {
-		const classes = element.props.className.trim().split(/\s+/);
-		const residualClasses = [];
-		const rules = [];
-		for (const className of classes) {
-			const classRules = inlinableRules.get(className);
-			if (classRules) rules.push(...classRules);
-			if (nonInlinableRules.has(className)) residualClasses.push(className);
-			else if (!classRules) residualClasses.push(className);
-		}
-		propsToOverwrite.style = {
+	if (!element.props.className || require_is_component.isComponent(element)) return react.default.cloneElement(element, element.props, element.props.children);
+	const classes = element.props.className.trim().split(/\s+/);
+	const residualClasses = [];
+	const classProperties = Object.create(null);
+	const rules = [];
+	for (const className of classes) {
+		const classRules = inlinableRules.get(className);
+		if (classRules) rules.push(...classRules);
+		const nonInlinable = nonInlinableRules.get(className);
+		if (nonInlinable) {
+			const sanitized = require_sanitize_class_name.sanitizeClassName(className);
+			residualClasses.push(sanitized);
+			const properties = [];
+			for (const rule of nonInlinable) (0, css_tree.walk)(rule, {
+				visit: "Declaration",
+				enter(declaration) {
+					properties.push(declaration.property);
+				}
+			});
+			classProperties[sanitized] = properties;
+		} else if (!classRules) residualClasses.push(className);
+	}
+	const resolved = {
+		style: {
 			...require_make_inline_styles_for.makeInlineStylesFor(rules, customProperties),
 			...element.props.style
-		};
-		if (residualClasses.length > 0) propsToOverwrite.className = residualClasses.map((className) => {
-			if (nonInlinableRules.has(className)) return require_sanitize_class_name.sanitizeClassName(className);
-			return className;
-		}).join(" ");
-		else propsToOverwrite.className = void 0;
-	}
-	const newProps = {
+		},
+		className: residualClasses.length > 0 ? residualClasses.join(" ") : void 0,
+		classProperties
+	};
+	const resolveTailwind = require_element_marker.getElementOptions(element.type)?.resolveTailwind;
+	const newProps = resolveTailwind ? resolveTailwind(element.props, resolved) : {
 		...element.props,
-		...propsToOverwrite
+		style: resolved.style,
+		className: resolved.className
 	};
 	return react.default.cloneElement(element, newProps, newProps.children);
 }

package/dist/components/tailwind/utils/tailwindcss/clone-element-with-inlined-styles.mjs

@@ -1,33 +1,46 @@
+import { getElementOptions } from "../../../element-marker.mjs";
 import { makeInlineStylesFor } from "../css/make-inline-styles-for.mjs";
 import { sanitizeClassName } from "../compatibility/sanitize-class-name.mjs";
 import { isComponent } from "../react/is-component.mjs";
 import React from "react";
+import { walk } from "css-tree/dist/csstree.esm";
 //#region src/components/tailwind/utils/tailwindcss/clone-element-with-inlined-styles.ts
 function cloneElementWithInlinedStyles(element, inlinableRules, nonInlinableRules, customProperties) {
-	const propsToOverwrite = {};
-	if (element.props.className && !isComponent(element)) {
-		const classes = element.props.className.trim().split(/\s+/);
-		const residualClasses = [];
-		const rules = [];
-		for (const className of classes) {
-			const classRules = inlinableRules.get(className);
-			if (classRules) rules.push(...classRules);
-			if (nonInlinableRules.has(className)) residualClasses.push(className);
-			else if (!classRules) residualClasses.push(className);
-		}
-		propsToOverwrite.style = {
+	if (!element.props.className || isComponent(element)) return React.cloneElement(element, element.props, element.props.children);
+	const classes = element.props.className.trim().split(/\s+/);
+	const residualClasses = [];
+	const classProperties = Object.create(null);
+	const rules = [];
+	for (const className of classes) {
+		const classRules = inlinableRules.get(className);
+		if (classRules) rules.push(...classRules);
+		const nonInlinable = nonInlinableRules.get(className);
+		if (nonInlinable) {
+			const sanitized = sanitizeClassName(className);
+			residualClasses.push(sanitized);
+			const properties = [];
+			for (const rule of nonInlinable) walk(rule, {
+				visit: "Declaration",
+				enter(declaration) {
+					properties.push(declaration.property);
+				}
+			});
+			classProperties[sanitized] = properties;
+		} else if (!classRules) residualClasses.push(className);
+	}
+	const resolved = {
+		style: {
 			...makeInlineStylesFor(rules, customProperties),
 			...element.props.style
-		};
-		if (residualClasses.length > 0) propsToOverwrite.className = residualClasses.map((className) => {
-			if (nonInlinableRules.has(className)) return sanitizeClassName(className);
-			return className;
-		}).join(" ");
-		else propsToOverwrite.className = void 0;
-	}
-	const newProps = {
+		},
+		className: residualClasses.length > 0 ? residualClasses.join(" ") : void 0,
+		classProperties
+	};
+	const resolveTailwind = getElementOptions(element.type)?.resolveTailwind;
+	const newProps = resolveTailwind ? resolveTailwind(element.props, resolved) : {
 		...element.props,
-		...propsToOverwrite
+		style: resolved.style,
+		className: resolved.className
 	};
 	return React.cloneElement(element, newProps, newProps.children);
 }

package/dist/index.cjs

@@ -1,4 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_element_marker = require("./components/element-marker.cjs");
 const require_body = require("./components/body/body.cjs");
 const require_button = require("./components/button/button.cjs");
 const require_code_block = require("./components/code-block/code-block.cjs");
@@ -64,6 +65,7 @@ exports.hopscotch = require_themes.hopscotch;
 exports.inlineStyles = require_inline_styles.inlineStyles;
 exports.laserwave = require_themes.laserwave;
 exports.lucario = require_themes.lucario;
+exports.markAsElement = require_element_marker.markAsElement;
 exports.materialDark = require_themes.materialDark;
 exports.materialLight = require_themes.materialLight;
 exports.materialOceanic = require_themes.materialOceanic;

package/dist/index.d.cts

@@ -6,6 +6,7 @@ import { CodeBlock, CodeBlockProps } from "./components/code-block/code-block.cj
 import { CodeInline, CodeInlineProps } from "./components/code-inline/code-inline.cjs";
 import { Column, ColumnProps } from "./components/column/column.cjs";
 import { Container, ContainerProps } from "./components/container/container.cjs";
+import { ElementOptions, ResolvedTailwind, markAsElement } from "./components/element-marker.cjs";
 import { Font, FontProps } from "./components/font/font.cjs";
 import { Head, HeadProps } from "./components/head/head.cjs";
 import { Heading, HeadingAs, HeadingProps } from "./components/heading/heading.cjs";
@@ -23,4 +24,4 @@ import { EmailElementProps, Tailwind, TailwindConfig, TailwindProps, pixelBasedP
 import { TailwindSetup, setupTailwind } from "./components/tailwind/utils/tailwindcss/setup-tailwind.cjs";
 import { Text, TextProps } from "./components/text/text.cjs";
 export * from "@react-email/render";
-export { Body, BodyProps, Button, ButtonProps, CodeBlock, CodeBlockProps, CodeInline, CodeInlineProps, Column, ColumnProps, Container, ContainerProps, EmailElementProps, Font, FontProps, Head, HeadProps, Heading, HeadingAs, HeadingProps, Hr, HrProps, Html, HtmlProps, Img, ImgProps, Link, LinkProps, Markdown, MarkdownProps, Preview, PreviewProps, PrismLanguage, Row, RowProps, Section, SectionProps, Tailwind, TailwindConfig, TailwindProps, TailwindSetup, Text, TextProps, Theme, a11yDark, atomDark, baseAteliersulphurpoolLight, cb, coldarkCold, coldarkDark, coyWithoutShadows, darcula, dracula, duotoneDark, duotoneEarth, duotoneForest, duotoneLight, duotoneSea, duotoneSpace, ghcolors, gruvboxDark, gruvboxLight, holiTheme, hopscotch, inlineStyles, laserwave, lucario, materialDark, materialLight, materialOceanic, nightOwl, nord, oneDark, oneLight, pixelBasedPreset, pojoaque, renderWhiteSpace, sanitizeStyleSheet, setupTailwind, shadesOfPurple, solarizedDarkAtom, synthwave84, vesper, vs, vscDarkPlus, xonokai, zTouch };
+export { Body, BodyProps, Button, ButtonProps, CodeBlock, CodeBlockProps, CodeInline, CodeInlineProps, Column, ColumnProps, Container, ContainerProps, ElementOptions, EmailElementProps, Font, FontProps, Head, HeadProps, Heading, HeadingAs, HeadingProps, Hr, HrProps, Html, HtmlProps, Img, ImgProps, Link, LinkProps, Markdown, MarkdownProps, Preview, PreviewProps, PrismLanguage, ResolvedTailwind, Row, RowProps, Section, SectionProps, Tailwind, TailwindConfig, TailwindProps, TailwindSetup, Text, TextProps, Theme, a11yDark, atomDark, baseAteliersulphurpoolLight, cb, coldarkCold, coldarkDark, coyWithoutShadows, darcula, dracula, duotoneDark, duotoneEarth, duotoneForest, duotoneLight, duotoneSea, duotoneSpace, ghcolors, gruvboxDark, gruvboxLight, holiTheme, hopscotch, inlineStyles, laserwave, lucario, markAsElement, materialDark, materialLight, materialOceanic, nightOwl, nord, oneDark, oneLight, pixelBasedPreset, pojoaque, renderWhiteSpace, sanitizeStyleSheet, setupTailwind, shadesOfPurple, solarizedDarkAtom, synthwave84, vesper, vs, vscDarkPlus, xonokai, zTouch };

package/dist/index.d.mts

@@ -6,6 +6,7 @@ import { CodeBlock, CodeBlockProps } from "./components/code-block/code-block.mj
 import { CodeInline, CodeInlineProps } from "./components/code-inline/code-inline.mjs";
 import { Column, ColumnProps } from "./components/column/column.mjs";
 import { Container, ContainerProps } from "./components/container/container.mjs";
+import { ElementOptions, ResolvedTailwind, markAsElement } from "./components/element-marker.mjs";
 import { Font, FontProps } from "./components/font/font.mjs";
 import { Head, HeadProps } from "./components/head/head.mjs";
 import { Heading, HeadingAs, HeadingProps } from "./components/heading/heading.mjs";
@@ -23,4 +24,4 @@ import { EmailElementProps, Tailwind, TailwindConfig, TailwindProps, pixelBasedP
 import { TailwindSetup, setupTailwind } from "./components/tailwind/utils/tailwindcss/setup-tailwind.mjs";
 import { Text, TextProps } from "./components/text/text.mjs";
 export * from "@react-email/render";
-export { Body, BodyProps, Button, ButtonProps, CodeBlock, CodeBlockProps, CodeInline, CodeInlineProps, Column, ColumnProps, Container, ContainerProps, EmailElementProps, Font, FontProps, Head, HeadProps, Heading, HeadingAs, HeadingProps, Hr, HrProps, Html, HtmlProps, Img, ImgProps, Link, LinkProps, Markdown, MarkdownProps, Preview, PreviewProps, PrismLanguage, Row, RowProps, Section, SectionProps, Tailwind, TailwindConfig, TailwindProps, TailwindSetup, Text, TextProps, Theme, a11yDark, atomDark, baseAteliersulphurpoolLight, cb, coldarkCold, coldarkDark, coyWithoutShadows, darcula, dracula, duotoneDark, duotoneEarth, duotoneForest, duotoneLight, duotoneSea, duotoneSpace, ghcolors, gruvboxDark, gruvboxLight, holiTheme, hopscotch, inlineStyles, laserwave, lucario, materialDark, materialLight, materialOceanic, nightOwl, nord, oneDark, oneLight, pixelBasedPreset, pojoaque, renderWhiteSpace, sanitizeStyleSheet, setupTailwind, shadesOfPurple, solarizedDarkAtom, synthwave84, vesper, vs, vscDarkPlus, xonokai, zTouch };
+export { Body, BodyProps, Button, ButtonProps, CodeBlock, CodeBlockProps, CodeInline, CodeInlineProps, Column, ColumnProps, Container, ContainerProps, ElementOptions, EmailElementProps, Font, FontProps, Head, HeadProps, Heading, HeadingAs, HeadingProps, Hr, HrProps, Html, HtmlProps, Img, ImgProps, Link, LinkProps, Markdown, MarkdownProps, Preview, PreviewProps, PrismLanguage, ResolvedTailwind, Row, RowProps, Section, SectionProps, Tailwind, TailwindConfig, TailwindProps, TailwindSetup, Text, TextProps, Theme, a11yDark, atomDark, baseAteliersulphurpoolLight, cb, coldarkCold, coldarkDark, coyWithoutShadows, darcula, dracula, duotoneDark, duotoneEarth, duotoneForest, duotoneLight, duotoneSea, duotoneSpace, ghcolors, gruvboxDark, gruvboxLight, holiTheme, hopscotch, inlineStyles, laserwave, lucario, markAsElement, materialDark, materialLight, materialOceanic, nightOwl, nord, oneDark, oneLight, pixelBasedPreset, pojoaque, renderWhiteSpace, sanitizeStyleSheet, setupTailwind, shadesOfPurple, solarizedDarkAtom, synthwave84, vesper, vs, vscDarkPlus, xonokai, zTouch };

package/dist/index.mjs

@@ -1,3 +1,4 @@
+import { markAsElement } from "./components/element-marker.mjs";
 import { Body } from "./components/body/body.mjs";
 import { Button } from "./components/button/button.mjs";
 import { CodeBlock } from "./components/code-block/code-block.mjs";
@@ -22,4 +23,4 @@ import { setupTailwind } from "./components/tailwind/utils/tailwindcss/setup-tai
 import { Tailwind, pixelBasedPreset } from "./components/tailwind/tailwind.mjs";
 import { Text } from "./components/text/text.mjs";
 export * from "@react-email/render";
-export { Body, Button, CodeBlock, CodeInline, Column, Container, Font, Head, Heading, Hr, Html, Img, Link, Markdown, Preview, Row, Section, Tailwind, Text, a11yDark, atomDark, baseAteliersulphurpoolLight, cb, coldarkCold, coldarkDark, coyWithoutShadows, darcula, dracula, duotoneDark, duotoneEarth, duotoneForest, duotoneLight, duotoneSea, duotoneSpace, ghcolors, gruvboxDark, gruvboxLight, holiTheme, hopscotch, inlineStyles, laserwave, lucario, materialDark, materialLight, materialOceanic, nightOwl, nord, oneDark, oneLight, pixelBasedPreset, pojoaque, renderWhiteSpace, sanitizeStyleSheet, setupTailwind, shadesOfPurple, solarizedDarkAtom, synthwave84, vesper, vs, vscDarkPlus, xonokai, zTouch };
+export { Body, Button, CodeBlock, CodeInline, Column, Container, Font, Head, Heading, Hr, Html, Img, Link, Markdown, Preview, Row, Section, Tailwind, Text, a11yDark, atomDark, baseAteliersulphurpoolLight, cb, coldarkCold, coldarkDark, coyWithoutShadows, darcula, dracula, duotoneDark, duotoneEarth, duotoneForest, duotoneLight, duotoneSea, duotoneSpace, ghcolors, gruvboxDark, gruvboxLight, holiTheme, hopscotch, inlineStyles, laserwave, lucario, markAsElement, materialDark, materialLight, materialOceanic, nightOwl, nord, oneDark, oneLight, pixelBasedPreset, pojoaque, renderWhiteSpace, sanitizeStyleSheet, setupTailwind, shadesOfPurple, solarizedDarkAtom, synthwave84, vesper, vs, vscDarkPlus, xonokai, zTouch };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@depup/react-email",
-  "version": "6.9.3-depup.0",
+  "version": "6.11.0-depup.0",
   "description": "A live preview of your emails right in your browser. (with updated dependencies)",
   "bin": {
     "email": "./dist/cli/index.mjs"
@@ -35,15 +35,15 @@
     "email"
   ],
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=20.19.0"
   },
   "peerDependencies": {
     "react": "^18.0 || ^19.0 || ^19.0.0-rc",
     "react-dom": "^18.0 || ^19.0 || ^19.0.0-rc"
   },
   "dependencies": {
-    "@babel/parser": "^8.0.4",
-    "@babel/traverse": "^8.0.4",
+    "@babel/parser": "^7.29.9",
+    "@babel/traverse": "^8.0.6",
     "@react-email/render": ">=2.1.0",
     "chokidar": "^5.0.0",
     "commander": "^15.0.0",
@@ -54,14 +54,14 @@
     "glob": "^13.0.6",
     "jiti": "^2.7.0",
     "log-symbols": "^7.0.1",
-    "marked": "^18.0.11",
+    "marked": "^18.0.14",
     "mime-types": "^3.0.2",
     "normalize-path": "^3.0.0",
-    "nypm": "^0.6.9",
+    "nypm": "^0.6.10",
     "picospinner": "^3.1.2",
     "prismjs": "^1.30.0",
     "prompts": "2.4.2",
-    "socket.io": "^4.8.3",
+    "socket.io": "^4.8.4",
     "tailwindcss": "^4.3.3",
     "tsconfig-paths": "4.2.0"
   },
@@ -73,7 +73,7 @@
     "@types/mime-types": "2.1.4",
     "@types/prompts": "2.4.9",
     "@types/shelljs": "0.10.0",
-    "next": "16.3.0",
+    "next": "16.3.3",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "shelljs": "0.10.0",
@@ -96,15 +96,11 @@
     "changes": {
       "@babel/parser": {
         "from": "7.29.2",
-        "to": "^8.0.4"
+        "to": "^7.29.9"
       },
       "@babel/traverse": {
         "from": "7.29.0",
-        "to": "^8.0.4"
-      },
-      "chokidar": {
-        "from": "^4.0.3",
-        "to": "^5.0.0"
+        "to": "^8.0.6"
       },
       "commander": {
         "from": "^13.0.0",
@@ -132,7 +128,7 @@
       },
       "marked": {
         "from": "^15.0.12",
-        "to": "^18.0.11"
+        "to": "^18.0.14"
       },
       "mime-types": {
         "from": "^3.0.0",
@@ -140,7 +136,7 @@
       },
       "nypm": {
         "from": "0.6.6",
-        "to": "^0.6.9"
+        "to": "^0.6.10"
       },
       "picospinner": {
         "from": "^3.0.0",
@@ -148,17 +144,17 @@
       },
       "socket.io": {
         "from": "^4.8.1",
-        "to": "^4.8.3"
+        "to": "^4.8.4"
       },
       "tailwindcss": {
         "from": "^4.1.18",
         "to": "^4.3.3"
       }
     },
-    "depsUpdated": 15,
+    "depsUpdated": 14,
     "originalPackage": "react-email",
-    "originalVersion": "6.9.3",
-    "processedAt": "2026-08-26T00:17:10.469Z",
+    "originalVersion": "6.11.0",
+    "processedAt": "2026-09-27T01:01:23.007Z",
     "smokeTest": "failed"
   }
 }

package/readme.md

@@ -30,6 +30,14 @@ Starts a local development server that will watch your files and automatically r
 npx react-email dev
 ```
 
+Templates are bundled with [esbuild](https://esbuild.github.io/). To run additional esbuild plugins, for example a compile-time transform your templates depend on, pass `--esbuild-plugins` with the path to a module whose default export is an array of plugins (or a function returning one):
+
+```sh
+npx react-email dev --esbuild-plugins ./esbuild-plugins.mjs
+```
+
+The same option is accepted by `email build` and `email export`.
+
 ### `email export`
 
 Generates the plain HTML files of your emails into a `out` directory.

package/src/components/container/container.tsx

@@ -3,57 +3,77 @@ import { markAsElement } from '../element-marker.js';
 
 export type ContainerProps = Readonly<React.ComponentPropsWithoutRef<'table'>>;
 
-export const Container = React.forwardRef<HTMLTableElement, ContainerProps>(
-  ({ children, style = {}, ...props }, ref) => {
-    // Split padding styles to improve compatibility with Klaviyo and Outlook,
-    // while preserving user-provided style property order without allocating
-    // entry arrays on each render.
-    const tdStyle: React.CSSProperties = {};
-    const tableStyle: React.CSSProperties = {};
-
-    const styleRecord = style as Record<string, unknown>;
-
-    for (const key in styleRecord) {
-      if (!Object.hasOwn(styleRecord, key)) {
-        continue;
-      }
+export const Container = React.forwardRef<
+  HTMLTableElement,
+  ContainerProps & { tdClassName?: string }
+>(({ children, style = {}, tdClassName, ...props }, ref) => {
+  // Split padding styles to improve compatibility with Klaviyo and Outlook,
+  // while preserving user-provided style property order without allocating
+  // entry arrays on each render.
+  const tdStyle: React.CSSProperties = {};
+  const tableStyle: React.CSSProperties = {};
+
+  const styleRecord = style as Record<string, unknown>;
+
+  for (const key in styleRecord) {
+    if (!Object.hasOwn(styleRecord, key)) {
+      continue;
+    }
+
+    const value = styleRecord[key];
 
-      const value = styleRecord[key];
+    if (key.startsWith('padding')) {
+      (tdStyle as Record<string, unknown>)[key] = value;
+    } else {
+      (tableStyle as Record<string, unknown>)[key] = value;
+    }
+  }
 
+  return (
+    <table
+      align="center"
+      width="100%"
+      {...props}
+      border={0}
+      cellPadding="0"
+      cellSpacing="0"
+      ref={ref}
+      role="presentation"
+      style={{ maxWidth: '37.5em', ...tableStyle }}
+    >
+      <tbody>
+        <tr style={{ width: '100%' }}>
+          <td className={tdClassName} style={tdStyle}>
+            {children}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+});
+
+Container.displayName = 'Container';
+markAsElement<ContainerProps & { tdClassName?: string }>(Container, {
+  resolveTailwind(props, { style, className, classProperties }) {
+    const tableClasses: string[] = [];
+    const tdClasses = props.tdClassName ? [props.tdClassName] : [];
+    for (const name of className?.split(' ') ?? []) {
+      const properties = classProperties[name];
       if (
-        key === 'padding' ||
-        key === 'paddingTop' ||
-        key === 'paddingRight' ||
-        key === 'paddingBottom' ||
-        key === 'paddingLeft'
+        properties &&
+        properties.length > 0 &&
+        properties.every((property) => property.startsWith('padding'))
       ) {
-        (tdStyle as Record<string, unknown>)[key] = value;
+        tdClasses.push(name);
       } else {
-        (tableStyle as Record<string, unknown>)[key] = value;
+        tableClasses.push(name);
       }
     }
-
-    return (
-      <table
-        align="center"
-        width="100%"
-        {...props}
-        border={0}
-        cellPadding="0"
-        cellSpacing="0"
-        ref={ref}
-        role="presentation"
-        style={{ maxWidth: '37.5em', ...tableStyle }}
-      >
-        <tbody>
-          <tr style={{ width: '100%' }}>
-            <td style={tdStyle}>{children}</td>
-          </tr>
-        </tbody>
-      </table>
-    );
+    return {
+      ...props,
+      style,
+      className: tableClasses.length > 0 ? tableClasses.join(' ') : undefined,
+      tdClassName: tdClasses.length > 0 ? tdClasses.join(' ') : undefined,
+    };
   },
-);
-
-Container.displayName = 'Container';
-markAsElement(Container);
+});

package/src/components/element-marker.ts

@@ -1,5 +1,28 @@
+import type * as React from 'react';
+
 export const elementMarker = Symbol.for('react-email.element');
 
-export const markAsElement = (component: unknown) => {
-  (component as Record<symbol, boolean>)[elementMarker] = true;
+export interface ResolvedTailwind {
+  style: React.CSSProperties;
+  className: string | undefined;
+  classProperties: Record<string, string[]>;
+}
+
+export interface ElementOptions<Props = object> {
+  resolveTailwind?: (props: Props, resolved: ResolvedTailwind) => Props;
+}
+
+export const markAsElement = <Props>(
+  component: unknown,
+  options: ElementOptions<Props> = {},
+) => {
+  (component as Record<symbol, ElementOptions<Props>>)[elementMarker] = options;
+};
+
+export const getElementOptions = (
+  type: unknown,
+): ElementOptions | undefined => {
+  if (typeof type !== 'function' && typeof type !== 'object') return undefined;
+  if (type === null) return undefined;
+  return (type as Record<symbol, ElementOptions | undefined>)[elementMarker];
 };

package/src/components/index.ts

@@ -4,6 +4,11 @@ export * from './code-block/index.js';
 export * from './code-inline/index.js';
 export * from './column/index.js';
 export * from './container/index.js';
+export {
+  type ElementOptions,
+  markAsElement,
+  type ResolvedTailwind,
+} from './element-marker.js';
 export * from './font/index.js';
 export * from './head/index.js';
 export * from './heading/index.js';