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

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # react-email
 
+## 6.11.0
+
+### Minor Changes
+
+- 0432f96: Use custom esbuild plugins by passing the new `--esbuild-plugins` flag to `email dev`, `email build` and `email export`, so templates that need a custom compile-time transform can be previewed and exported.
+
+## 6.10.0
+
+### Minor Changes
+
+- e9939f0: Upgrade `chokidar` to v5, which ships with npm provenance, so installs under pnpm's `trustPolicy: no-downgrade` no longer fail. The CLI now needs Node 20.19 or newer.
+
+### Patch Changes
+
+- 1b45ed0: The dev server now refuses to start on Node older than 20.19, which matches the package's declared minimum, and names the installed version in the error.
+
+## 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/README.md

@@ -13,29 +13,28 @@ npm install @depup/react-email
 
 | Field | Value |
 |-------|-------|
-| Original | [react-email](https://www.npmjs.com/package/react-email) @ 6.9.3 |
-| Processed | 2026-08-26 |
+| Original | [react-email](https://www.npmjs.com/package/react-email) @ 6.11.0 |
+| Processed | 2026-09-27 |
 | Smoke test | failed |
-| Deps updated | 15 |
+| Deps updated | 14 |
 
 ## Dependency Changes
 
 | Dependency | From | To |
 |------------|------|-----|
-| @babel/parser | 7.29.2 | ^8.0.4 |
-| @babel/traverse | 7.29.0 | ^8.0.4 |
-| chokidar | ^4.0.3 | ^5.0.0 |
+| @babel/parser | 7.29.2 | ^7.29.9 |
+| @babel/traverse | 7.29.0 | ^8.0.6 |
 | commander | ^13.0.0 | ^15.0.0 |
 | conf | ^15.0.2 | ^15.1.0 |
 | debounce | ^2.0.0 | ^3.0.0 |
 | esbuild | ^0.28.0 | ^0.28.2 |
 | jiti | 2.6.1 | ^2.7.0 |
 | log-symbols | ^7.0.0 | ^7.0.1 |
-| marked | ^15.0.12 | ^18.0.11 |
+| marked | ^15.0.12 | ^18.0.14 |
 | mime-types | ^3.0.0 | ^3.0.2 |
-| nypm | 0.6.6 | ^0.6.9 |
+| nypm | 0.6.6 | ^0.6.10 |
 | picospinner | ^3.0.0 | ^3.1.2 |
-| socket.io | ^4.8.1 | ^4.8.3 |
+| socket.io | ^4.8.1 | ^4.8.4 |
 | tailwindcss | ^4.1.18 | ^4.3.3 |
 
 ---

package/changes.json

@@ -2,15 +2,11 @@
   "bumped": {
     "@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",
@@ -38,7 +34,7 @@
     },
     "marked": {
       "from": "^15.0.12",
-      "to": "^18.0.11"
+      "to": "^18.0.14"
     },
     "mime-types": {
       "from": "^3.0.0",
@@ -46,7 +42,7 @@
     },
     "nypm": {
       "from": "0.6.6",
-      "to": "^0.6.9"
+      "to": "^0.6.10"
     },
     "picospinner": {
       "from": "^3.0.0",
@@ -54,13 +50,13 @@
     },
     "socket.io": {
       "from": "^4.8.1",
-      "to": "^4.8.3"
+      "to": "^4.8.4"
     },
     "tailwindcss": {
       "from": "^4.1.18",
       "to": "^4.3.3"
     }
   },
-  "timestamp": "2026-08-26T00:16:59.732Z",
-  "totalUpdated": 15
+  "timestamp": "2026-09-27T01:01:16.578Z",
+  "totalUpdated": 14
 }

package/dist/cli/index.mjs

@@ -6,7 +6,7 @@ import * as fs$1 from "node:fs";
 import fs, { existsSync, promises, statSync } from "node:fs";
 import * as path$2 from "node:path";
 import path from "node:path";
-import url, { fileURLToPath } from "node:url";
+import url, { fileURLToPath, pathToFileURL } from "node:url";
 import logSymbols from "log-symbols";
 import { addDevDependency, installDependencies, runScript } from "nypm";
 import * as fsp$1 from "node:fs/promises";
@@ -6533,7 +6533,7 @@ const getTracingRootDir = async (usersProjectLocation) => {
 //#region package.json
 var package_default = {
 	name: "react-email",
-	version: "6.9.3",
+	version: "6.11.0",
 	description: "A live preview of your emails right in your browser.",
 	bin: { "email": "./dist/cli/index.mjs" },
 	type: "module",
@@ -6565,7 +6565,7 @@ var package_default = {
 		"directory": "packages/react-email"
 	},
 	keywords: ["react", "email"],
-	engines: { "node": ">=20.0.0" },
+	engines: { "node": ">=20.19.0" },
 	peerDependencies: {
 		"react": "^18.0 || ^19.0 || ^19.0.0-rc",
 		"react-dom": "^18.0 || ^19.0 || ^19.0.0-rc"
@@ -6574,7 +6574,7 @@ var package_default = {
 		"@babel/parser": "catalog:",
 		"@babel/traverse": "catalog:",
 		"@react-email/render": "workspace:>=2.1.0",
-		"chokidar": "^4.0.3",
+		"chokidar": "^5.0.0",
 		"commander": "catalog:",
 		"conf": "^15.0.2",
 		"css-tree": "3.2.1",
@@ -6739,8 +6739,9 @@ const stopSpinnerAndPersist = (spinner, display) => {
 //#endregion
 //#region src/cli/commands/build.ts
 const isInReactEmailMonorepo = !path.dirname(fileURLToPath(import.meta.url)).includes("node_modules");
-const setNextEnvironmentVariablesForBuild = async (emailsDirRelativePath, builtPreviewAppPath, usersProjectLocation) => {
+const setNextEnvironmentVariablesForBuild = async (emailsDirRelativePath, builtPreviewAppPath, usersProjectLocation, esbuildPluginsPath) => {
 	const rootDir = await getTracingRootDir(usersProjectLocation);
+	const esbuildPluginsAbsolutePath = esbuildPluginsPath ? path.resolve(usersProjectLocation, esbuildPluginsPath).replaceAll("\\", "/") : void 0;
 	const nextConfigContents = `
 import path from 'path';
 const emailsDirRelativePath = path.normalize('${emailsDirRelativePath}');
@@ -6754,13 +6755,14 @@ const nextConfig = {
     REACT_EMAIL_INTERNAL_EMAILS_DIR_RELATIVE_PATH: emailsDirRelativePath,
     REACT_EMAIL_INTERNAL_EMAILS_DIR_ABSOLUTE_PATH: path.resolve(userProjectLocation, emailsDirRelativePath),
     REACT_EMAIL_INTERNAL_PREVIEW_SERVER_LOCATION: previewServerLocation,
-    REACT_EMAIL_INTERNAL_USER_PROJECT_LOCATION: userProjectLocation
+    REACT_EMAIL_INTERNAL_USER_PROJECT_LOCATION: userProjectLocation,
+    ${esbuildPluginsAbsolutePath ? `REACT_EMAIL_INTERNAL_ESBUILD_PLUGINS_PATH: '${esbuildPluginsAbsolutePath}',` : ""}
   },
   turbopack: {
     root: rootDir,
   },
   outputFileTracingRoot: rootDir,
-  serverExternalPackages: ['esbuild'],
+  serverExternalPackages: ['esbuild', 'jiti'],
   typescript: {
     ignoreBuildErrors: true
   },
@@ -6803,7 +6805,7 @@ const updatePackageJson = async (builtUiPath) => {
 	for (const [dependency, version] of Object.entries(packageJson.devDependencies)) packageJson.devDependencies[dependency] = version.replace("workspace:", "");
 	await fs.promises.writeFile(packageJsonPath, JSON.stringify(packageJson), "utf8");
 };
-const build$1 = async ({ dir: emailsDirRelativePath, packageManager }) => {
+const build$1 = async ({ dir: emailsDirRelativePath, packageManager, esbuildPlugins }) => {
 	if (packageManager) console.warn("The --packageManager option is deprecated and ignored. The build command now just uses npm.");
 	try {
 		const usersProjectLocation = process.cwd();
@@ -6837,7 +6839,7 @@ const build$1 = async ({ dir: emailsDirRelativePath, packageManager }) => {
 			await fs.promises.cp(staticPath, builtStaticDirectory, { recursive: true });
 		}
 		spinner.setText("Setting Next environment variables for preview app to work properly");
-		await setNextEnvironmentVariablesForBuild(emailsDirRelativePath, builtPreviewAppPath, usersProjectLocation);
+		await setNextEnvironmentVariablesForBuild(emailsDirRelativePath, builtPreviewAppPath, usersProjectLocation, esbuildPlugins);
 		spinner.setText("Setting server side generation for the email preview pages");
 		await forceSSGForEmailPreviews(emailsDirPath, builtPreviewAppPath);
 		spinner.setText("Updating package.json's build and start scripts");
@@ -7229,21 +7231,18 @@ const conf = new Conf({
 });
 //#endregion
 //#region src/cli/utils/style-text.ts
-/**
-* Centralized fallback for Node versions (<20.12.0) without util.styleText.
-* Returns the original text when styleText is unavailable.
-*/
 const styleText = nodeUtil.styleText ? nodeUtil.styleText : (_, text) => text;
 //#endregion
 //#region src/cli/utils/preview/get-env-variables-for-preview-app.ts
-const getEnvVariablesForPreviewApp = (relativePathToEmailsDirectory, previewServerLocation, cwd, resendApiKey, compatibilityClients) => {
+const getEnvVariablesForPreviewApp = (relativePathToEmailsDirectory, previewServerLocation, cwd, resendApiKey, compatibilityClients, esbuildPluginsPath) => {
 	return {
 		REACT_EMAIL_INTERNAL_EMAILS_DIR_RELATIVE_PATH: relativePathToEmailsDirectory,
 		REACT_EMAIL_INTERNAL_EMAILS_DIR_ABSOLUTE_PATH: path.resolve(cwd, relativePathToEmailsDirectory),
 		REACT_EMAIL_INTERNAL_PREVIEW_SERVER_LOCATION: previewServerLocation,
 		REACT_EMAIL_INTERNAL_USER_PROJECT_LOCATION: cwd,
 		REACT_EMAIL_INTERNAL_RESEND_API_KEY: resendApiKey,
-		...compatibilityClients !== void 0 && { COMPATIBILITY_EMAIL_CLIENTS: compatibilityClients }
+		...compatibilityClients !== void 0 && { COMPATIBILITY_EMAIL_CLIENTS: compatibilityClients },
+		...esbuildPluginsPath !== void 0 && { REACT_EMAIL_INTERNAL_ESBUILD_PLUGINS_PATH: path.resolve(cwd, esbuildPluginsPath) }
 	};
 };
 //#endregion
@@ -7298,10 +7297,10 @@ const safeAsyncServerListen = (server, port) => {
 		});
 	});
 };
-const startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath, port, compatibilityClients) => {
-	const [majorNodeVersion] = process.versions.node.split(".");
-	if (majorNodeVersion && Number.parseInt(majorNodeVersion, 10) < 20) {
-		console.error(` ${logSymbols.error}  Node ${majorNodeVersion} is not supported. Please upgrade to Node 20 or higher.`);
+const startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath, port, compatibilityClients, esbuildPluginsPath) => {
+	const [major = 0, minor = 0] = process.versions.node.split(".").map(Number);
+	if (major < 20 || major === 20 && minor < 19) {
+		console.error(` ${logSymbols.error}  Node ${process.versions.node} is not supported. Please upgrade to Node 20.19 or higher.`);
 		process.exit(1);
 	}
 	const previewServerLocation = await getUiLocation();
@@ -7332,7 +7331,7 @@ const startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath,
 	} else {
 		const nextPortToTry = port + 1;
 		console.warn(` ${logSymbols.warning} Port ${port} is already in use, trying ${nextPortToTry}`);
-		return startDevServer(emailsDirRelativePath, staticBaseDirRelativePath, nextPortToTry, compatibilityClients);
+		return startDevServer(emailsDirRelativePath, staticBaseDirRelativePath, nextPortToTry, compatibilityClients, esbuildPluginsPath);
 	}
 	devServer.on("close", async () => {
 		await app.close();
@@ -7354,7 +7353,7 @@ const startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath,
 	process.env = {
 		NODE_ENV: "development",
 		...process.env,
-		...getEnvVariablesForPreviewApp(path.normalize(emailsDirRelativePath), previewServerLocation, process.cwd(), conf.get("resendApiKey"), compatibilityClients)
+		...getEnvVariablesForPreviewApp(path.normalize(emailsDirRelativePath), previewServerLocation, process.cwd(), conf.get("resendApiKey"), compatibilityClients, esbuildPluginsPath)
 	};
 	if (!process.env.ESBUILD_BINARY_PATH) try {
 		const esbuild = createJiti(previewServer.esmResolve("esbuild"));
@@ -7453,13 +7452,13 @@ const tree = async (dirPath, depth) => {
 };
 //#endregion
 //#region src/cli/commands/dev.ts
-const dev = async ({ dir: emailsDirRelativePath, port, clients }) => {
+const dev = async ({ dir: emailsDirRelativePath, port, clients, esbuildPlugins }) => {
 	try {
 		if (!fs.existsSync(emailsDirRelativePath)) {
 			console.error(`Missing ${emailsDirRelativePath} folder`);
 			process.exit(1);
 		}
-		await setupHotreloading(await startDevServer(emailsDirRelativePath, emailsDirRelativePath, Number.parseInt(port, 10), clients), emailsDirRelativePath);
+		await setupHotreloading(await startDevServer(emailsDirRelativePath, emailsDirRelativePath, Number.parseInt(port, 10), clients, esbuildPlugins), emailsDirRelativePath);
 	} catch (error) {
 		console.log(error);
 		process.exit(1);
@@ -7493,12 +7492,26 @@ const inlineCssLoader = () => ({
 	}
 });
 //#endregion
+//#region src/cli/utils/esbuild/load-esbuild-plugins.ts
+/**
+* Loads the esbuild plugins a user wants applied when their templates are
+* bundled. The module's default export is either an array of plugins or a
+* function returning one, so plugins that need setup can do it lazily.
+*/
+const loadEsbuildPlugins = async (modulePath) => {
+	const exported = await createJiti(pathToFileURL(modulePath).href).import(modulePath, { default: true });
+	const plugins = typeof exported === "function" ? await exported() : exported;
+	if (!Array.isArray(plugins)) throw new Error(`Expected the default export of ${modulePath} to be an array of esbuild plugins or a function returning one`);
+	return plugins;
+};
+//#endregion
 //#region src/cli/utils/esbuild/escape-string-for-regex.ts
 function escapeStringForRegex(string) {
 	return string.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&").replace(/-/g, "\\x2d");
 }
 //#endregion
 //#region src/cli/utils/esbuild/renderring-utilities-exporter.ts
+const ENTRY_SUFFIX = "?react-email-entry";
 /**
 * Made to export the `render` function out of the user's email template
 * so that issues like https://github.com/resend/react-email/issues/649 don't
@@ -7509,17 +7522,39 @@ function escapeStringForRegex(string) {
 *
 * This avoids multiple versions of React being involved, i.e., the version
 * in the CLI vs. the version the user has on their emails.
+*
+* Each template entry point is replaced by a wrapper module that re-exports
+* it along with the utilities, instead of loading the template's source here.
+* The template itself then goes through the regular load pipeline, so other
+* plugins (for example the user's `--esbuild-plugins`) can still transform it.
 */
 const renderingUtilitiesExporter = (emailTemplates) => ({
 	name: "rendering-utilities-exporter",
-	setup: (b) => {
-		b.onLoad({ filter: new RegExp(emailTemplates.map((emailPath) => escapeStringForRegex(emailPath)).join("|")) }, async ({ path: pathToFile }) => {
+	setup: async (b) => {
+		const templatePaths = await Promise.all(emailTemplates.map((emailPath) => promises.realpath(emailPath)));
+		const templateFilter = new RegExp(templatePaths.map((templatePath) => escapeStringForRegex(templatePath)).join("|"));
+		b.onResolve({ filter: /.*/ }, async (args) => {
+			if (args.kind !== "entry-point") return null;
+			const resolvedPath = path.isAbsolute(args.path) ? args.path : path.resolve(args.resolveDir, args.path);
+			const realPath = await promises.realpath(resolvedPath);
+			if (!templatePaths.includes(realPath)) return null;
 			return {
-				contents: `${await promises.readFile(pathToFile, "utf8")};
-          export { render } from 'react-email-module-that-will-export-render'
+				path: realPath,
+				suffix: ENTRY_SUFFIX
+			};
+		});
+		b.onLoad({ filter: templateFilter }, ({ path: pathToFile, suffix }) => {
+			if (suffix !== ENTRY_SUFFIX) return null;
+			const templateSpecifier = JSON.stringify(pathToFile);
+			return {
+				contents: `export * from ${templateSpecifier};
+          import * as emailModule from ${templateSpecifier};
+          export default emailModule.default;
+          export { render } from 'react-email-module-that-will-export-render';
           export { createElement as reactEmailCreateReactElement } from 'react';
         `,
-				loader: path.extname(pathToFile).slice(1)
+				loader: "js",
+				resolveDir: path.dirname(pathToFile)
 			};
 		});
 		b.onResolve({ filter: /^react-email-module-that-will-export-render$/ }, async (args) => {
@@ -7595,6 +7630,7 @@ const exportTemplates = async (pathToWhereEmailMarkupShouldBeDumped, emailsDirec
 	if (fs.existsSync(pathToWhereEmailMarkupShouldBeDumped)) fs.rmSync(pathToWhereEmailMarkupShouldBeDumped, { recursive: true });
 	const allTemplates = getEmailTemplatesFromDirectory(emailsDirectoryMetadata);
 	try {
+		const userPlugins = options.esbuildPlugins ? await loadEsbuildPlugins(path.resolve(process.cwd(), options.esbuildPlugins)) : [];
 		for (let i = 0; i < allTemplates.length; i += BUILD_BATCH_SIZE) {
 			const batch = allTemplates.slice(i, i + BUILD_BATCH_SIZE);
 			await build({
@@ -7608,7 +7644,11 @@ const exportTemplates = async (pathToWhereEmailMarkupShouldBeDumped, emailsDirec
 				outExtension: { ".js": ".cjs" },
 				outdir: pathToWhereEmailMarkupShouldBeDumped,
 				platform: "node",
-				plugins: [inlineCssLoader(), renderingUtilitiesExporter(batch)],
+				plugins: [
+					inlineCssLoader(),
+					renderingUtilitiesExporter(batch),
+					...userPlugins
+				],
 				write: true
 			});
 			await stop();
@@ -7792,14 +7832,15 @@ if (!requiredFlags.every((flag) => process.execArgv.includes(flag))) spawn(proce
 });
 else {
 	program.name("react-email").description("A live preview of your emails right in your browser").version(package_default.version);
-	program.command("dev").description("Starts the preview email development app").option("-d, --dir <path>", "Directory with your email templates", "./emails").option("-p --port <port>", "Port to run dev server on", "3000").option("-c, --clients <clients>", "Comma-separated list of email clients to show compatibility warnings for (overrides COMPATIBILITY_EMAIL_CLIENTS)", parseClientsOption).action(dev);
-	program.command("build").description("Copies the preview app for onto .react-email and builds it").option("-d, --dir <path>", "Directory with your email templates", "./emails").addOption(new Option("-p, --packageManager <name>").hideHelp()).action(build$1);
+	program.command("dev").description("Starts the preview email development app").option("-d, --dir <path>", "Directory with your email templates", "./emails").option("-p --port <port>", "Port to run dev server on", "3000").option("-c, --clients <clients>", "Comma-separated list of email clients to show compatibility warnings for (overrides COMPATIBILITY_EMAIL_CLIENTS)", parseClientsOption).option("--esbuild-plugins <path>", "Path to a module whose default export is an array of esbuild plugins (or a function returning one) applied when bundling email templates").action(dev);
+	program.command("build").description("Copies the preview app for onto .react-email and builds it").option("-d, --dir <path>", "Directory with your email templates", "./emails").addOption(new Option("-p, --packageManager <name>").hideHelp()).option("--esbuild-plugins <path>", "Path to a module whose default export is an array of esbuild plugins (or a function returning one) applied when bundling email templates").action(build$1);
 	program.command("start").description("Runs the built preview app that is inside of \".react-email\"").action(start);
-	program.command("export").description("Build the templates to the `out` directory").option("--outDir <path>", "Output directory", "out").option("-p, --pretty", "Pretty print the output", false).option("-t, --plainText", "Set output format as plain text", false).option("-d, --dir <path>", "Directory with your email templates", "./emails").option("-e, --extension <extension>", "Set a custom file extension for rendered emails (e.g. blade.php)").option("-s, --silent", "To, or not to show a spinner with process information", false).action(({ outDir, pretty, plainText, silent, dir: srcDir, extension }) => exportTemplates(outDir, srcDir, {
+	program.command("export").description("Build the templates to the `out` directory").option("--outDir <path>", "Output directory", "out").option("-p, --pretty", "Pretty print the output", false).option("-t, --plainText", "Set output format as plain text", false).option("-d, --dir <path>", "Directory with your email templates", "./emails").option("-e, --extension <extension>", "Set a custom file extension for rendered emails (e.g. blade.php)").option("-s, --silent", "To, or not to show a spinner with process information", false).option("--esbuild-plugins <path>", "Path to a module whose default export is an array of esbuild plugins (or a function returning one) applied when bundling email templates").action(({ outDir, pretty, plainText, silent, dir: srcDir, extension, esbuildPlugins }) => exportTemplates(outDir, srcDir, {
 		silent,
 		plainText,
 		pretty,
-		extension
+		extension,
+		esbuildPlugins
 	}));
 	const resend = program.command("resend");
 	resend.command("setup").description("Sets up the integration between the React Email CLI, and your Resend account through an API Key").action(resendSetup);

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