react-email 6.9.3 → 6.9.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # react-email
 
+## 6.9.5
+
+### Patch Changes
+
+- 0250981: fix responsive padding not applying to inner td for Container and Section
+
+## 6.9.4
+
 ## 6.9.3
 
 ## 6.9.2

package/dist/cli/index.mjs

@@ -6533,7 +6533,7 @@ const getTracingRootDir = async (usersProjectLocation) => {
 //#region package.json
 var package_default = {
 	name: "react-email",
-	version: "6.9.3",
+	version: "6.9.5",
 	description: "A live preview of your emails right in your browser.",
 	bin: { "email": "./dist/cli/index.mjs" },
 	type: "module",

package/dist/components/container/container.cjs

@@ -4,14 +4,14 @@ let react = require("react");
 react = require_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/container/container.tsx
-const Container = react.forwardRef(({ children, style = {}, ...props }, ref) => {
+const Container = react.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__ */ (0, react_jsx_runtime.jsx)("table", {
@@ -30,6 +30,7 @@ const Container = react.forwardRef(({ children, style = {}, ...props }, ref) =>
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", {
 			style: { width: "100%" },
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+				className: tdClassName,
 				style: tdStyle,
 				children
 			})
@@ -37,6 +38,20 @@ const Container = react.forwardRef(({ children, style = {}, ...props }, ref) =>
 	});
 });
 Container.displayName = "Container";
-require_element_marker.markAsElement(Container);
+require_element_marker.markAsElement(Container, { 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
 exports.Container = Container;

package/dist/components/container/container.d.cts

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

package/dist/components/container/container.d.mts

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

package/dist/components/container/container.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/container/container.tsx
-const Container = React$1.forwardRef(({ children, style = {}, ...props }, ref) => {
+const Container = 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", {
@@ -28,6 +28,7 @@ const Container = React$1.forwardRef(({ children, style = {}, ...props }, ref) =
 		children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", {
 			style: { width: "100%" },
 			children: /* @__PURE__ */ jsx("td", {
+				className: tdClassName,
 				style: tdStyle,
 				children
 			})
@@ -35,6 +36,20 @@ const Container = React$1.forwardRef(({ children, style = {}, ...props }, ref) =
 	});
 });
 Container.displayName = "Container";
-markAsElement(Container);
+markAsElement(Container, { 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 { Container };

package/dist/components/element-marker.cjs

@@ -1,8 +1,14 @@
 //#region src/components/element-marker.ts
 const elementMarker = Symbol.for("react-email.element");
-const markAsElement = (component) => {
-	component[elementMarker] = true;
+const markAsElement = (component, options = {}) => {
+	component[elementMarker] = options;
+};
+const getElementOptions = (type) => {
+	if (typeof type !== "function" && typeof type !== "object") return void 0;
+	if (type === null) return void 0;
+	return type[elementMarker];
 };
 //#endregion
 exports.elementMarker = elementMarker;
+exports.getElementOptions = getElementOptions;
 exports.markAsElement = markAsElement;

package/dist/components/element-marker.d.cts

@@ -0,0 +1,14 @@
+import * as React$1 from "react";
+
+//#region src/components/element-marker.d.ts
+interface ResolvedTailwind {
+  style: React$1.CSSProperties;
+  className: string | undefined;
+  classProperties: Record<string, string[]>;
+}
+interface ElementOptions<Props = object> {
+  resolveTailwind?: (props: Props, resolved: ResolvedTailwind) => Props;
+}
+declare const markAsElement: <Props>(component: unknown, options?: ElementOptions<Props>) => void;
+//#endregion
+export { ElementOptions, ResolvedTailwind, markAsElement };

package/dist/components/element-marker.d.mts

@@ -0,0 +1,14 @@
+import * as React$1 from "react";
+
+//#region src/components/element-marker.d.ts
+interface ResolvedTailwind {
+  style: React$1.CSSProperties;
+  className: string | undefined;
+  classProperties: Record<string, string[]>;
+}
+interface ElementOptions<Props = object> {
+  resolveTailwind?: (props: Props, resolved: ResolvedTailwind) => Props;
+}
+declare const markAsElement: <Props>(component: unknown, options?: ElementOptions<Props>) => void;
+//#endregion
+export { ElementOptions, ResolvedTailwind, markAsElement };

package/dist/components/element-marker.mjs

@@ -1,7 +1,12 @@
 //#region src/components/element-marker.ts
 const elementMarker = Symbol.for("react-email.element");
-const markAsElement = (component) => {
-	component[elementMarker] = true;
+const markAsElement = (component, options = {}) => {
+	component[elementMarker] = options;
+};
+const getElementOptions = (type) => {
+	if (typeof type !== "function" && typeof type !== "object") return void 0;
+	if (type === null) return void 0;
+	return type[elementMarker];
 };
 //#endregion
-export { elementMarker, markAsElement };
+export { elementMarker, getElementOptions, markAsElement };

package/dist/components/index.d.cts

@@ -6,6 +6,7 @@ import { CodeBlock, CodeBlockProps } from "./code-block/code-block.cjs";
 import { CodeInline, CodeInlineProps } from "./code-inline/code-inline.cjs";
 import { Column, ColumnProps } from "./column/column.cjs";
 import { Container, ContainerProps } from "./container/container.cjs";
+import { ElementOptions, ResolvedTailwind, markAsElement } from "./element-marker.cjs";
 import { Font, FontProps } from "./font/font.cjs";
 import { Head, HeadProps } from "./head/head.cjs";
 import { Heading, HeadingAs, HeadingProps } from "./heading/heading.cjs";

package/dist/components/index.d.mts

@@ -6,6 +6,7 @@ import { CodeBlock, CodeBlockProps } from "./code-block/code-block.mjs";
 import { CodeInline, CodeInlineProps } from "./code-inline/code-inline.mjs";
 import { Column, ColumnProps } from "./column/column.mjs";
 import { Container, ContainerProps } from "./container/container.mjs";
+import { ElementOptions, ResolvedTailwind, markAsElement } from "./element-marker.mjs";
 import { Font, FontProps } from "./font/font.mjs";
 import { Head, HeadProps } from "./head/head.mjs";
 import { Heading, HeadingAs, HeadingProps } from "./heading/heading.mjs";

package/dist/components/section/section.cjs

@@ -4,14 +4,14 @@ let react = require("react");
 react = require_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/section/section.tsx
-const Section = react.forwardRef(({ children, style = {}, ...props }, ref) => {
+const Section = react.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__ */ (0, react_jsx_runtime.jsx)("table", {
@@ -25,12 +25,27 @@ const Section = react.forwardRef(({ children, style = {}, ...props }, ref) => {
 		ref,
 		style: tableStyle,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+			className: tdClassName,
 			style: tdStyle,
 			children
 		}) }) })
 	});
 });
 Section.displayName = "Section";
-require_element_marker.markAsElement(Section);
+require_element_marker.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
 exports.Section = Section;

package/dist/components/section/section.d.cts

@@ -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.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": "react-email",
-  "version": "6.9.3",
+  "version": "6.9.5",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.mjs"
@@ -67,7 +67,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",

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';

package/src/components/section/section.tsx

@@ -3,57 +3,77 @@ import { markAsElement } from '../element-marker.js';
 
 export type SectionProps = Readonly<React.ComponentPropsWithoutRef<'table'>>;
 
-export const Section = React.forwardRef<HTMLTableElement, SectionProps>(
-  ({ 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 Section = React.forwardRef<
+  HTMLTableElement,
+  SectionProps & { 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%"
+      border={0}
+      cellPadding="0"
+      cellSpacing="0"
+      role="presentation"
+      {...props}
+      ref={ref}
+      style={tableStyle}
+    >
+      <tbody>
+        <tr>
+          <td className={tdClassName} style={tdStyle}>
+            {children}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+});
+
+Section.displayName = 'Section';
+markAsElement<SectionProps & { tdClassName?: string }>(Section, {
+  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%"
-        border={0}
-        cellPadding="0"
-        cellSpacing="0"
-        role="presentation"
-        {...props}
-        ref={ref}
-        style={tableStyle}
-      >
-        <tbody>
-          <tr>
-            <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,
+    };
   },
-);
-
-Section.displayName = 'Section';
-markAsElement(Section);
+});

package/src/components/tailwind/tailwind.spec.tsx

@@ -275,6 +275,19 @@ describe('Tailwind component', () => {
     expect(html).not.toMatch(/<table[^>]*style="[^"]*padding:1rem/);
   });
 
+  it('routes responsive padding classes on <Section> to the inner <td>', async () => {
+    const html = await render(
+      <Tailwind>
+        <Head />
+        <Section className="max-sm:px-5 max-sm:bg-red-500 px-9">x</Section>
+      </Tailwind>,
+    );
+
+    expect(html).toMatchInlineSnapshot(
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><style>@media (max-width:40rem){.max-sm_bg-red-500{background-color:rgb(251,44,54)!important}}@media (max-width:40rem){.max-sm_px-5{padding-right:1.25rem!important;padding-left:1.25rem!important}}</style></head><!--$--><!--head--><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" class="max-sm_bg-red-500"><tbody><tr><td class="max-sm_px-5" style="padding-right:2.25rem;padding-left:2.25rem">x</td></tr></tbody></table><!--/$-->"`,
+    );
+  });
+
   it('inlines Tailwind classes on <Column> onto its <td>', async () => {
     const html = await render(
       <Tailwind>

package/src/components/tailwind/utils/tailwindcss/clone-element-with-inlined-styles.ts

@@ -1,5 +1,6 @@
-import type { Rule } from 'css-tree';
+import { type Rule, walk } from 'css-tree';
 import React from 'react';
+import { getElementOptions } from '../../../element-marker.js';
 import type { EmailElementProps } from '../../tailwind.js';
 import { sanitizeClassName } from '../compatibility/sanitize-class-name.js';
 import type { CustomProperties } from '../css/get-custom-properties.js';
@@ -12,50 +13,58 @@ export function cloneElementWithInlinedStyles(
   nonInlinableRules: Map<string, Rule[]>,
   customProperties: CustomProperties,
 ) {
-  const propsToOverwrite: Partial<EmailElementProps> = {};
+  if (!element.props.className || isComponent(element)) {
+    return React.cloneElement(element, element.props, element.props.children);
+  }
 
-  if (element.props.className && !isComponent(element)) {
-    const classes = element.props.className.trim().split(/\s+/);
+  const classes = element.props.className.trim().split(/\s+/);
 
-    const residualClasses: string[] = [];
+  const residualClasses: string[] = [];
+  const classProperties: Record<string, string[]> = Object.create(null);
 
-    const rules: Rule[] = [];
-    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);
-      }
+  const rules: Rule[] = [];
+  for (const className of classes) {
+    const classRules = inlinableRules.get(className);
+    if (classRules) {
+      rules.push(...classRules);
     }
-
-    const styles = makeInlineStylesFor(rules, customProperties);
-    propsToOverwrite.style = {
-      ...styles,
-      ...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 = undefined;
+    const nonInlinable = nonInlinableRules.get(className);
+    if (nonInlinable) {
+      const sanitized = sanitizeClassName(className);
+      residualClasses.push(sanitized);
+      const properties: string[] = [];
+      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 newProps = {
-    ...element.props,
-    ...propsToOverwrite,
+  const resolved = {
+    style: {
+      ...makeInlineStylesFor(rules, customProperties),
+      ...element.props.style,
+    },
+    className:
+      residualClasses.length > 0 ? residualClasses.join(' ') : undefined,
+    classProperties,
   };
 
+  const resolveTailwind = getElementOptions(element.type)?.resolveTailwind;
+  const newProps = resolveTailwind
+    ? (resolveTailwind(element.props, resolved) as EmailElementProps)
+    : {
+        ...element.props,
+        style: resolved.style,
+        className: resolved.className,
+      };
+
   return React.cloneElement(element, newProps, newProps.children);
 }