react-email 6.3.3 → 6.5.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # react-email
 
+## 6.5.0
+
+### Minor Changes
+
+- 3875d2a: add a `--clients` option to `email dev` and a `COMPATIBILITY_EMAIL_CLIENTS` environment variable to narrow which email clients trigger compatibility warnings. By default the preview still warns for `gmail`, `apple-mail`, `outlook`, and `yahoo`. Teams that only target one or two clients can now skip the noise: `email dev --clients outlook,apple-mail`. The CLI flag wins over the env var; an empty or fully-invalid list falls back to the defaults so warnings can't be silently switched off. Builds on #2797 by @ReemX.
+
+### Patch Changes
+
+- d47825a: Add accessibility defaults to components: `dir`/`lang` on `Body`, an empty `alt` fallback on `Img`, `role="presentation"` on the `Markdown` table, and a `<title>` from `Preview`.
+
+## 6.4.0
+
+### Minor Changes
+
+- ba99365: resolve and strip unresolved `--tw-*` CSS variables in non-inlinable rules so Tailwind media query utilities no longer break Gmail
+
 ## 6.3.3
 
 ## 6.3.2

package/dist/cli/index.mjs

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import { createRequire } from "node:module";
 import { spawn } from "node:child_process";
-import { Option, program } from "commander";
+import { InvalidArgumentError, Option, program } from "commander";
 import * as fs$1 from "node:fs";
 import fs, { existsSync, promises, statSync } from "node:fs";
 import * as path$2 from "node:path";
@@ -6523,7 +6523,7 @@ const getEmailsDirectoryMetadata = async (absolutePathToEmailsDirectory, keepFil
 //#region package.json
 var package_default = {
 	name: "react-email",
-	version: "6.3.3",
+	version: "6.5.0",
 	description: "A live preview of your emails right in your browser.",
 	bin: { "email": "./dist/cli/index.mjs" },
 	type: "module",
@@ -7226,13 +7226,14 @@ const conf = new Conf({
 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) => {
+const getEnvVariablesForPreviewApp = (relativePathToEmailsDirectory, previewServerLocation, cwd, resendApiKey, compatibilityClients) => {
 	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
+		REACT_EMAIL_INTERNAL_RESEND_API_KEY: resendApiKey,
+		...compatibilityClients !== void 0 && { COMPATIBILITY_EMAIL_CLIENTS: compatibilityClients }
 	};
 };
 //#endregion
@@ -7278,7 +7279,7 @@ const safeAsyncServerListen = (server, port) => {
 		});
 	});
 };
-const startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath, 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.`);
@@ -7312,7 +7313,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);
+		return startDevServer(emailsDirRelativePath, staticBaseDirRelativePath, nextPortToTry, compatibilityClients);
 	}
 	devServer.on("close", async () => {
 		await app.close();
@@ -7334,7 +7335,7 @@ const startDevServer = async (emailsDirRelativePath, staticBaseDirRelativePath,
 	process.env = {
 		NODE_ENV: "development",
 		...process.env,
-		...getEnvVariablesForPreviewApp(path.normalize(emailsDirRelativePath), previewServerLocation, process.cwd(), conf.get("resendApiKey"))
+		...getEnvVariablesForPreviewApp(path.normalize(emailsDirRelativePath), previewServerLocation, process.cwd(), conf.get("resendApiKey"), compatibilityClients)
 	};
 	if (!process.env.ESBUILD_BINARY_PATH) try {
 		const esbuild = createJiti(previewServer.esmResolve("esbuild"));
@@ -7433,13 +7434,13 @@ const tree = async (dirPath, depth) => {
 };
 //#endregion
 //#region src/cli/commands/dev.ts
-const dev = async ({ dir: emailsDirRelativePath, port }) => {
+const dev = async ({ dir: emailsDirRelativePath, port, clients }) => {
 	try {
 		if (!fs.existsSync(emailsDirRelativePath)) {
 			console.error(`Missing ${emailsDirRelativePath} folder`);
 			process.exit(1);
 		}
-		await setupHotreloading(await startDevServer(emailsDirRelativePath, emailsDirRelativePath, Number.parseInt(port, 10)), emailsDirRelativePath);
+		await setupHotreloading(await startDevServer(emailsDirRelativePath, emailsDirRelativePath, Number.parseInt(port, 10), clients), emailsDirRelativePath);
 	} catch (error) {
 		console.log(error);
 		process.exit(1);
@@ -7727,7 +7728,41 @@ const start = async () => {
 	}
 };
 //#endregion
+//#region src/cli/utils/email-clients.ts
+const ALL_EMAIL_CLIENTS = [
+	"gmail",
+	"outlook",
+	"yahoo",
+	"apple-mail",
+	"aol",
+	"thunderbird",
+	"microsoft",
+	"samsung-email",
+	"sfr",
+	"orange",
+	"protonmail",
+	"hey",
+	"mail-ru",
+	"fastmail",
+	"laposte",
+	"t-online-de",
+	"free-fr",
+	"gmx",
+	"web-de",
+	"ionos-1and1",
+	"rainloop",
+	"wp-pl"
+];
+//#endregion
 //#region src/cli/index.ts
+const parseClientsOption = (value) => {
+	const requested = value.split(",").map((entry) => entry.trim().toLowerCase()).filter(Boolean);
+	if (requested.length === 0) throw new InvalidArgumentError("--clients requires at least one email client.");
+	const known = new Set(ALL_EMAIL_CLIENTS);
+	const invalid = requested.filter((entry) => !known.has(entry));
+	if (invalid.length > 0) throw new InvalidArgumentError(`Unknown email client(s): ${invalid.join(", ")}. Supported: ${ALL_EMAIL_CLIENTS.join(", ")}.`);
+	return requested.join(",");
+};
 const requiredFlags = ["--experimental-vm-modules", "--disable-warning=ExperimentalWarning"];
 if (!requiredFlags.every((flag) => process.execArgv.includes(flag))) spawn(process.execPath, [
 	...requiredFlags,
@@ -7739,7 +7774,7 @@ 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").action(dev);
+	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("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("-s, --silent", "To, or not to show a spinner with process information", false).action(({ outDir, pretty, plainText, silent, dir: srcDir }) => exportTemplates(outDir, srcDir, {

package/dist/index.cjs

@@ -76,6 +76,8 @@ const Body = react.forwardRef(({ children, style, ...props }, ref) => {
 	if (style) for (const property of [...marginProperties, ...paddingProperties]) bodyStyle[property] = style[property] !== void 0 ? 0 : void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("body", {
 		...props,
+		dir: props.dir ?? "ltr",
+		lang: props.lang ?? "en",
 		style: bodyStyle,
 		ref,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
@@ -86,6 +88,8 @@ const Body = react.forwardRef(({ children, style, ...props }, ref) => {
 			role: "presentation",
 			align: "center",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+				dir: props.dir ?? "ltr",
+				lang: props.lang ?? "en",
 				style,
 				children
 			}) }) })
@@ -17601,7 +17605,7 @@ Html.displayName = "Html";
 //#region src/components/img/img.tsx
 const Img = react.forwardRef(({ alt, src, width, height, style, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 	...props,
-	alt,
+	alt: alt ?? "",
 	height,
 	ref,
 	src,
@@ -17850,7 +17854,7 @@ const Markdown = react.forwardRef(({ children, markdownContainerStyles, markdown
 		const tbodyRows = rows.map((row) => renderer.tablerow({ text: row.map((cell) => renderer.tablecell(cell)).join("") })).join("");
 		const thead = `<thead${styleThead ? ` style="${styleThead}"` : ""}>\n${theadRow}</thead>`;
 		const tbody = `<tbody${styleTbody ? ` style="${styleTbody}"` : ""}>${tbodyRows}</tbody>`;
-		return `<table${styleTable ? ` style="${styleTable}"` : ""}>\n${thead}\n${tbody}</table>\n`;
+		return `<table role="presentation"${styleTable ? ` style="${styleTable}"` : ""}>\n${thead}\n${tbody}</table>\n`;
 	};
 	renderer.tablecell = ({ tokens, align, header }) => {
 		const text = renderer.parser.parseInline(tokens);
@@ -17877,7 +17881,7 @@ Markdown.displayName = "Markdown";
 const PREVIEW_MAX_LENGTH = 200;
 const Preview = react.forwardRef(({ children = "", ...props }, ref) => {
 	const text = (Array.isArray(children) ? children.join("") : children).substring(0, PREVIEW_MAX_LENGTH);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: text }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		style: {
 			display: "none",
 			overflow: "hidden",
@@ -17890,7 +17894,7 @@ const Preview = react.forwardRef(({ children = "", ...props }, ref) => {
 		...props,
 		ref,
 		children: [text, renderWhiteSpace(text)]
-	});
+	})] });
 });
 Preview.displayName = "Preview";
 const whiteSpaceCodes = "\xA0‌​‍‎‏";
@@ -37771,6 +37775,55 @@ function getReactProperty(prop) {
 	return fromDashCaseToCamelCase(modifiedProp);
 }
 //#endregion
+//#region src/components/tailwind/utils/css/strip-empty-tailwind-vars.ts
+/**
+* Tailwind v4 emits variant-stacking idioms like
+*   font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) tabular-nums var(--tw-numeric-fraction,)
+*   filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-invert,) ...
+* where each var() has an empty fallback so missing variants collapse to nothing.
+* Tailwind deliberately leaves these variant vars undefined until used, so they
+* stay in the output here and produce unresolvable custom properties in email HTML
+* (no email client supports CSS custom properties reliably). Per the CSS spec
+* (https://www.w3.org/TR/css-variables-1/#using-variables) an empty fallback means
+* "use empty string if the variable is undefined", which is exactly what we want.
+*
+* Scoped to the `--tw-` prefix so any user-authored empty-fallback var() refs
+* are left untouched.
+*
+* Uses post-order traversal so an outer var(--tw-X, var(--tw-Y,)) collapses
+* correctly after the inner var() has been removed.
+*/
+function stripEmptyTailwindVars(node) {
+	walk(node, {
+		visit: "Function",
+		leave(func, funcItem, funcList) {
+			if (func.name !== "var") return;
+			let variableName;
+			walk(func, {
+				visit: "Identifier",
+				enter(identifier) {
+					variableName = identifier.name;
+					return this.break;
+				}
+			});
+			if (!variableName?.startsWith("--tw-")) return;
+			let sawComma = false;
+			let hasFallbackContent = false;
+			func.children.forEach((child) => {
+				if (!sawComma) {
+					if (child.type === "Operator" && child.value === ",") sawComma = true;
+					return;
+				}
+				let childValue = generate(child).trim();
+				if (child.type === "Raw") childValue = childValue.replaceAll(/var\(--tw-[^,()]+,\s*\)/g, "").trim();
+				if (childValue.length > 0) hasFallbackContent = true;
+			});
+			if (!sawComma || hasFallbackContent) return;
+			funcList.remove(funcItem);
+		}
+	});
+}
+//#endregion
 //#region src/components/tailwind/utils/css/unwrap-value.ts
 function unwrapValue(value) {
 	if (value.type === "Value" && value.children.size === 1) return value.children.first ?? value;
@@ -37815,34 +37868,7 @@ function makeInlineStylesFor(inlinableRules, customProperties) {
 			visit: "Declaration",
 			enter(declaration) {
 				if (declaration.property.startsWith("--")) return;
-				walk(declaration.value, {
-					visit: "Function",
-					leave(func, funcItem, funcList) {
-						if (func.name !== "var") return;
-						let variableName;
-						walk(func, {
-							visit: "Identifier",
-							enter(identifier) {
-								variableName = identifier.name;
-								return this.break;
-							}
-						});
-						if (!variableName?.startsWith("--tw-")) return;
-						let sawComma = false;
-						let hasFallbackContent = false;
-						func.children.forEach((child) => {
-							if (!sawComma) {
-								if (child.type === "Operator" && child.value === ",") sawComma = true;
-								return;
-							}
-							let childValue = generate(child).trim();
-							if (child.type === "Raw") childValue = childValue.replaceAll(/var\(--tw-[^,()]+,\s*\)/g, "").trim();
-							if (childValue.length > 0) hasFallbackContent = true;
-						});
-						if (!sawComma || hasFallbackContent) return;
-						funcList.remove(funcItem);
-					}
-				});
+				stripEmptyTailwindVars(declaration.value);
 				styles[getReactProperty(declaration.property)] = generate(declaration.value).trim() + (declaration.important ? "!important" : "");
 			}
 		});
@@ -37933,6 +37959,11 @@ function resolveAllCssVariables(node) {
 				hasReplaced = true;
 				break;
 			}
+			if (use.path[0]?.type === "Block" && use.path[1]?.type === "Atrule" && use.path[2]?.type === "Block" && use.path[3]?.type === "Rule" && definition.path[0]?.type === "Block" && definition.path[1]?.type === "Atrule" && definition.path[2]?.type === "Block" && definition.path[3]?.type === "Rule" && use.path[1].name === definition.path[1].name && (use.path[1].prelude ? definition.path[1].prelude ? generate(use.path[1].prelude) === generate(definition.path[1].prelude) : false : definition.path[1].prelude === null) && doSelectorsIntersect(use.path[3].prelude, definition.path[3].prelude)) {
+				use.declaration.value = parse(generate(use.declaration.value).replaceAll(use.raw, definition.definition), { context: "value" });
+				hasReplaced = true;
+				break;
+			}
 		}
 		if (!hasReplaced && use.fallback) use.declaration.value = parse(generate(use.declaration.value).replaceAll(use.raw, use.fallback), { context: "value" });
 	}
@@ -38498,6 +38529,12 @@ function sanitizeClassName(className) {
 * What it does:
 * 1. Converts all declarations in all rules into important ones
 * 2. Sanitizes class selectors of all non-inlinable rules
+* 3. Removes --tw-* custom property declarations — by this point all CSS
+*    variables have been resolved, so these are dead weight in email HTML.
+* 4. Strips empty-fallback var(--tw-*,) refs that Tailwind v4 emits for
+*    variant-stacking idioms (filter, font-variant-numeric, etc.) — email
+*    clients can't resolve CSS custom properties reliably, so any --tw-*
+*    left as a bare empty-fallback ref would reach the client broken.
 */
 function sanitizeNonInlinableRules(node) {
 	walk(node, {
@@ -38509,8 +38546,13 @@ function sanitizeNonInlinableRules(node) {
 				});
 				walk(rule, {
 					visit: "Declaration",
-					enter(declaration) {
+					enter(declaration, item, list) {
+						if (declaration.property.startsWith("--tw-")) {
+							list.remove(item);
+							return;
+						}
 						declaration.important = true;
+						stripEmptyTailwindVars(declaration.value);
 					}
 				});
 			}

package/dist/index.mjs

@@ -55,6 +55,8 @@ const Body = React$1.forwardRef(({ children, style, ...props }, ref) => {
 	if (style) for (const property of [...marginProperties, ...paddingProperties]) bodyStyle[property] = style[property] !== void 0 ? 0 : void 0;
 	return /* @__PURE__ */ jsx("body", {
 		...props,
+		dir: props.dir ?? "ltr",
+		lang: props.lang ?? "en",
 		style: bodyStyle,
 		ref,
 		children: /* @__PURE__ */ jsx("table", {
@@ -65,6 +67,8 @@ const Body = React$1.forwardRef(({ children, style, ...props }, ref) => {
 			role: "presentation",
 			align: "center",
 			children: /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+				dir: props.dir ?? "ltr",
+				lang: props.lang ?? "en",
 				style,
 				children
 			}) }) })
@@ -17580,7 +17584,7 @@ Html.displayName = "Html";
 //#region src/components/img/img.tsx
 const Img = React$1.forwardRef(({ alt, src, width, height, style, ...props }, ref) => /* @__PURE__ */ jsx("img", {
 	...props,
-	alt,
+	alt: alt ?? "",
 	height,
 	ref,
 	src,
@@ -17829,7 +17833,7 @@ const Markdown = React$1.forwardRef(({ children, markdownContainerStyles, markdo
 		const tbodyRows = rows.map((row) => renderer.tablerow({ text: row.map((cell) => renderer.tablecell(cell)).join("") })).join("");
 		const thead = `<thead${styleThead ? ` style="${styleThead}"` : ""}>\n${theadRow}</thead>`;
 		const tbody = `<tbody${styleTbody ? ` style="${styleTbody}"` : ""}>${tbodyRows}</tbody>`;
-		return `<table${styleTable ? ` style="${styleTable}"` : ""}>\n${thead}\n${tbody}</table>\n`;
+		return `<table role="presentation"${styleTable ? ` style="${styleTable}"` : ""}>\n${thead}\n${tbody}</table>\n`;
 	};
 	renderer.tablecell = ({ tokens, align, header }) => {
 		const text = renderer.parser.parseInline(tokens);
@@ -17856,7 +17860,7 @@ Markdown.displayName = "Markdown";
 const PREVIEW_MAX_LENGTH = 200;
 const Preview = React$1.forwardRef(({ children = "", ...props }, ref) => {
 	const text = (Array.isArray(children) ? children.join("") : children).substring(0, PREVIEW_MAX_LENGTH);
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("title", { children: text }), /* @__PURE__ */ jsxs("div", {
 		style: {
 			display: "none",
 			overflow: "hidden",
@@ -17869,7 +17873,7 @@ const Preview = React$1.forwardRef(({ children = "", ...props }, ref) => {
 		...props,
 		ref,
 		children: [text, renderWhiteSpace(text)]
-	});
+	})] });
 });
 Preview.displayName = "Preview";
 const whiteSpaceCodes = "\xA0‌​‍‎‏";
@@ -37750,6 +37754,55 @@ function getReactProperty(prop) {
 	return fromDashCaseToCamelCase(modifiedProp);
 }
 //#endregion
+//#region src/components/tailwind/utils/css/strip-empty-tailwind-vars.ts
+/**
+* Tailwind v4 emits variant-stacking idioms like
+*   font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) tabular-nums var(--tw-numeric-fraction,)
+*   filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-invert,) ...
+* where each var() has an empty fallback so missing variants collapse to nothing.
+* Tailwind deliberately leaves these variant vars undefined until used, so they
+* stay in the output here and produce unresolvable custom properties in email HTML
+* (no email client supports CSS custom properties reliably). Per the CSS spec
+* (https://www.w3.org/TR/css-variables-1/#using-variables) an empty fallback means
+* "use empty string if the variable is undefined", which is exactly what we want.
+*
+* Scoped to the `--tw-` prefix so any user-authored empty-fallback var() refs
+* are left untouched.
+*
+* Uses post-order traversal so an outer var(--tw-X, var(--tw-Y,)) collapses
+* correctly after the inner var() has been removed.
+*/
+function stripEmptyTailwindVars(node) {
+	walk(node, {
+		visit: "Function",
+		leave(func, funcItem, funcList) {
+			if (func.name !== "var") return;
+			let variableName;
+			walk(func, {
+				visit: "Identifier",
+				enter(identifier) {
+					variableName = identifier.name;
+					return this.break;
+				}
+			});
+			if (!variableName?.startsWith("--tw-")) return;
+			let sawComma = false;
+			let hasFallbackContent = false;
+			func.children.forEach((child) => {
+				if (!sawComma) {
+					if (child.type === "Operator" && child.value === ",") sawComma = true;
+					return;
+				}
+				let childValue = generate(child).trim();
+				if (child.type === "Raw") childValue = childValue.replaceAll(/var\(--tw-[^,()]+,\s*\)/g, "").trim();
+				if (childValue.length > 0) hasFallbackContent = true;
+			});
+			if (!sawComma || hasFallbackContent) return;
+			funcList.remove(funcItem);
+		}
+	});
+}
+//#endregion
 //#region src/components/tailwind/utils/css/unwrap-value.ts
 function unwrapValue(value) {
 	if (value.type === "Value" && value.children.size === 1) return value.children.first ?? value;
@@ -37794,34 +37847,7 @@ function makeInlineStylesFor(inlinableRules, customProperties) {
 			visit: "Declaration",
 			enter(declaration) {
 				if (declaration.property.startsWith("--")) return;
-				walk(declaration.value, {
-					visit: "Function",
-					leave(func, funcItem, funcList) {
-						if (func.name !== "var") return;
-						let variableName;
-						walk(func, {
-							visit: "Identifier",
-							enter(identifier) {
-								variableName = identifier.name;
-								return this.break;
-							}
-						});
-						if (!variableName?.startsWith("--tw-")) return;
-						let sawComma = false;
-						let hasFallbackContent = false;
-						func.children.forEach((child) => {
-							if (!sawComma) {
-								if (child.type === "Operator" && child.value === ",") sawComma = true;
-								return;
-							}
-							let childValue = generate(child).trim();
-							if (child.type === "Raw") childValue = childValue.replaceAll(/var\(--tw-[^,()]+,\s*\)/g, "").trim();
-							if (childValue.length > 0) hasFallbackContent = true;
-						});
-						if (!sawComma || hasFallbackContent) return;
-						funcList.remove(funcItem);
-					}
-				});
+				stripEmptyTailwindVars(declaration.value);
 				styles[getReactProperty(declaration.property)] = generate(declaration.value).trim() + (declaration.important ? "!important" : "");
 			}
 		});
@@ -37912,6 +37938,11 @@ function resolveAllCssVariables(node) {
 				hasReplaced = true;
 				break;
 			}
+			if (use.path[0]?.type === "Block" && use.path[1]?.type === "Atrule" && use.path[2]?.type === "Block" && use.path[3]?.type === "Rule" && definition.path[0]?.type === "Block" && definition.path[1]?.type === "Atrule" && definition.path[2]?.type === "Block" && definition.path[3]?.type === "Rule" && use.path[1].name === definition.path[1].name && (use.path[1].prelude ? definition.path[1].prelude ? generate(use.path[1].prelude) === generate(definition.path[1].prelude) : false : definition.path[1].prelude === null) && doSelectorsIntersect(use.path[3].prelude, definition.path[3].prelude)) {
+				use.declaration.value = parse(generate(use.declaration.value).replaceAll(use.raw, definition.definition), { context: "value" });
+				hasReplaced = true;
+				break;
+			}
 		}
 		if (!hasReplaced && use.fallback) use.declaration.value = parse(generate(use.declaration.value).replaceAll(use.raw, use.fallback), { context: "value" });
 	}
@@ -38477,6 +38508,12 @@ function sanitizeClassName(className) {
 * What it does:
 * 1. Converts all declarations in all rules into important ones
 * 2. Sanitizes class selectors of all non-inlinable rules
+* 3. Removes --tw-* custom property declarations — by this point all CSS
+*    variables have been resolved, so these are dead weight in email HTML.
+* 4. Strips empty-fallback var(--tw-*,) refs that Tailwind v4 emits for
+*    variant-stacking idioms (filter, font-variant-numeric, etc.) — email
+*    clients can't resolve CSS custom properties reliably, so any --tw-*
+*    left as a bare empty-fallback ref would reach the client broken.
 */
 function sanitizeNonInlinableRules(node) {
 	walk(node, {
@@ -38488,8 +38525,13 @@ function sanitizeNonInlinableRules(node) {
 				});
 				walk(rule, {
 					visit: "Declaration",
-					enter(declaration) {
+					enter(declaration, item, list) {
+						if (declaration.property.startsWith("--tw-")) {
+							list.remove(item);
+							return;
+						}
 						declaration.important = true;
+						stripEmptyTailwindVars(declaration.value);
 					}
 				});
 			}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "6.3.3",
+  "version": "6.5.0",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.mjs"

package/src/components/body/__snapshots__/body.spec.tsx.snap

@@ -1,23 +1,23 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`<Body> component > margin resetting behavior > should reset the margin property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body style="margin:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
+exports[`<Body> component > margin resetting behavior > should reset the margin property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en" style="margin:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
 
-exports[`<Body> component > margin resetting behavior > should reset the marginBlock property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body style="margin-block:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-block:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
+exports[`<Body> component > margin resetting behavior > should reset the marginBlock property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en" style="margin-block:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin-block:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
 
-exports[`<Body> component > margin resetting behavior > should reset the marginBlockEnd property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body style="margin-block-end:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-block-end:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
+exports[`<Body> component > margin resetting behavior > should reset the marginBlockEnd property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en" style="margin-block-end:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin-block-end:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
 
-exports[`<Body> component > margin resetting behavior > should reset the marginBlockStart property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body style="margin-block-start:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-block-start:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
+exports[`<Body> component > margin resetting behavior > should reset the marginBlockStart property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en" style="margin-block-start:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin-block-start:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
 
-exports[`<Body> component > margin resetting behavior > should reset the marginBottom property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body style="margin-bottom:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-bottom:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
+exports[`<Body> component > margin resetting behavior > should reset the marginBottom property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en" style="margin-bottom:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin-bottom:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
 
-exports[`<Body> component > margin resetting behavior > should reset the marginInline property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body style="margin-inline:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-inline:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
+exports[`<Body> component > margin resetting behavior > should reset the marginInline property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en" style="margin-inline:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin-inline:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
 
-exports[`<Body> component > margin resetting behavior > should reset the marginInlineEnd property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body style="margin-inline-end:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-inline-end:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
+exports[`<Body> component > margin resetting behavior > should reset the marginInlineEnd property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en" style="margin-inline-end:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin-inline-end:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
 
-exports[`<Body> component > margin resetting behavior > should reset the marginInlineStart property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body style="margin-inline-start:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-inline-start:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
+exports[`<Body> component > margin resetting behavior > should reset the marginInlineStart property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en" style="margin-inline-start:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin-inline-start:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
 
-exports[`<Body> component > margin resetting behavior > should reset the marginLeft property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body style="margin-left:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-left:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
+exports[`<Body> component > margin resetting behavior > should reset the marginLeft property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en" style="margin-left:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin-left:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
 
-exports[`<Body> component > margin resetting behavior > should reset the marginRight property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body style="margin-right:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-right:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
+exports[`<Body> component > margin resetting behavior > should reset the marginRight property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en" style="margin-right:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin-right:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
 
-exports[`<Body> component > margin resetting behavior > should reset the marginTop property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body style="margin-top:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="margin-top:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;
+exports[`<Body> component > margin resetting behavior > should reset the marginTop property when it comes from props 1`] = `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en" style="margin-top:0"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="margin-top:10px">Random text</td></tr></tbody></table><!--/$--></body>"`;

package/src/components/body/body.spec.tsx

@@ -23,7 +23,7 @@ describe('<Body> component', () => {
   it('renders correctly', async () => {
     const actualOutput = await render(<Body>Lorem ipsum</Body>);
     expect(actualOutput).toMatchInlineSnapshot(
-      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td>Lorem ipsum</td></tr></tbody></table><!--/$--></body>"`,
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><body dir="ltr" lang="en"><!--$--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en">Lorem ipsum</td></tr></tbody></table><!--/$--></body>"`,
     );
   });
 

package/src/components/body/body.tsx

@@ -19,7 +19,13 @@ export const Body = React.forwardRef<HTMLBodyElement, BodyProps>(
       }
     }
     return (
-      <body {...props} style={bodyStyle} ref={ref}>
+      <body
+        {...props}
+        dir={props.dir ?? 'ltr'}
+        lang={props.lang ?? 'en'}
+        style={bodyStyle}
+        ref={ref}
+      >
         <table
           border={0}
           width="100%"
@@ -36,7 +42,13 @@ export const Body = React.forwardRef<HTMLBodyElement, BodyProps>(
 
                 See https://github.com/resend/react-email/issues/662.
               */}
-              <td style={style}>{children}</td>
+              <td
+                dir={props.dir ?? 'ltr'}
+                lang={props.lang ?? 'en'}
+                style={style}
+              >
+                {children}
+              </td>
             </tr>
           </tbody>
         </table>

package/src/components/img/img.tsx

@@ -6,7 +6,7 @@ export const Img = React.forwardRef<HTMLImageElement, ImgProps>(
   ({ alt, src, width, height, style, ...props }, ref) => (
     <img
       {...props}
-      alt={alt}
+      alt={alt ?? ''}
       height={height}
       ref={ref}
       src={src}

package/src/components/markdown/markdown.tsx

@@ -191,7 +191,7 @@ export const Markdown = React.forwardRef<HTMLDivElement, MarkdownProps>(
       const thead = `<thead${styleThead ? ` style="${styleThead}"` : ''}>\n${theadRow}</thead>`;
       const tbody = `<tbody${styleTbody ? ` style="${styleTbody}"` : ''}>${tbodyRows}</tbody>`;
 
-      return `<table${styleTable ? ` style="${styleTable}"` : ''}>\n${thead}\n${tbody}</table>\n`;
+      return `<table role="presentation"${styleTable ? ` style="${styleTable}"` : ''}>\n${thead}\n${tbody}</table>\n`;
     };
 
     renderer.tablecell = ({ tokens, align, header }) => {

package/src/components/preview/preview.spec.tsx

@@ -5,7 +5,7 @@ describe('<Preview> component', () => {
   it('renders correctly', async () => {
     const actualOutput = await render(<Preview>Email preview text</Preview>);
     expect(actualOutput).toMatchInlineSnapshot(
-      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">Email preview text<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><!--/$-->"`,
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><title>Email preview text</title><!--$--><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">Email preview text<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><!--/$-->"`,
     );
   });
 
@@ -14,7 +14,7 @@ describe('<Preview> component', () => {
       <Preview>Email preview text</Preview>,
     );
     expect(actualOutputArray).toMatchInlineSnapshot(
-      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">Email preview text<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><!--/$-->"`,
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><title>Email preview text</title><!--$--><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">Email preview text<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div></div><!--/$-->"`,
     );
   });
 
@@ -22,7 +22,7 @@ describe('<Preview> component', () => {
     const longText = 'really long'.repeat(100);
     const actualOutputLong = await render(<Preview>{longText}</Preview>);
     expect(actualOutputLong).toMatchInlineSnapshot(
-      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--$--><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">really longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longre</div><!--/$-->"`,
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><title>really longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longre</title><!--$--><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0" data-skip-in-text="true">really longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longreally longre</div><!--/$-->"`,
     );
   });
 });

package/src/components/preview/preview.tsx

@@ -15,22 +15,25 @@ export const Preview = React.forwardRef<HTMLDivElement, PreviewProps>(
     ).substring(0, PREVIEW_MAX_LENGTH);
 
     return (
-      <div
-        style={{
-          display: 'none',
-          overflow: 'hidden',
-          lineHeight: '1px',
-          opacity: 0,
-          maxHeight: 0,
-          maxWidth: 0,
-        }}
-        data-skip-in-text={true}
-        {...props}
-        ref={ref}
-      >
-        {text}
-        {renderWhiteSpace(text)}
-      </div>
+      <>
+        <title>{text}</title>
+        <div
+          style={{
+            display: 'none',
+            overflow: 'hidden',
+            lineHeight: '1px',
+            opacity: 0,
+            maxHeight: 0,
+            maxWidth: 0,
+          }}
+          data-skip-in-text={true}
+          {...props}
+          ref={ref}
+        >
+          {text}
+          {renderWhiteSpace(text)}
+        </div>
+      </>
     );
   },
 );

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

@@ -394,7 +394,7 @@ describe('Tailwind component', () => {
     );
 
     expect(actualOutput).toMatchInlineSnapshot(
-      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><style>@media (prefers-color-scheme:dark){.text-body{color:orange!important}}</style></head><body class="text-body"><!--$--><!--html--><!--head--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td style="color:green">this is the body</td></tr></tbody></table><!--/$--></body></html>"`,
+      `"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/><style>@media (prefers-color-scheme:dark){.text-body{color:orange!important}}</style></head><body class="text-body" dir="ltr" lang="en"><!--$--><!--html--><!--head--><!--body--><table border="0" width="100%" cellPadding="0" cellSpacing="0" role="presentation" align="center"><tbody><tr><td dir="ltr" lang="en" style="color:green">this is the body</td></tr></tbody></table><!--/$--></body></html>"`,
     );
   });
 

package/src/components/tailwind/utils/css/make-inline-styles-for.ts

@@ -1,6 +1,7 @@
 import { type CssNode, type Declaration, generate, walk } from 'css-tree';
 import { getReactProperty } from '../compatibility/get-react-property.js';
 import type { CustomProperties } from './get-custom-properties.js';
+import { stripEmptyTailwindVars } from './strip-empty-tailwind-vars.js';
 import { unwrapValue } from './unwrap-value.js';
 
 export function makeInlineStylesFor(
@@ -59,68 +60,7 @@ export function makeInlineStylesFor(
         if (declaration.property.startsWith('--')) {
           return;
         }
-        // Tailwind v4 emits variant-stacking idioms like
-        //   font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) tabular-nums var(--tw-numeric-fraction,)
-        // where each var() has an empty fallback so missing variants collapse to nothing.
-        // The walker above replaces var() calls with an initialValue when one is defined,
-        // but Tailwind deliberately leaves these variant vars undefined until used, so they
-        // stay in the output here and produce unresolvable custom properties in email HTML
-        // (no email client supports CSS custom properties reliably). Per the CSS spec
-        // (https://www.w3.org/TR/css-variables-1/#using-variables) an empty fallback means
-        // "use empty string if the variable is undefined", which is exactly what we want at
-        // inline-style time.
-        //
-        // Scoped to the `--tw-` prefix so any user-authored empty-fallback var() refs
-        // (even ones used inside tailwind utilities) are left untouched.
-        walk(declaration.value, {
-          visit: 'Function',
-          leave(func, funcItem, funcList) {
-            if (func.name !== 'var') {
-              return;
-            }
-
-            let variableName: string | undefined;
-            walk(func, {
-              visit: 'Identifier',
-              enter(identifier) {
-                variableName = identifier.name;
-                return this.break;
-              },
-            });
-            if (!variableName?.startsWith('--tw-')) {
-              return;
-            }
-
-            let sawComma = false;
-            let hasFallbackContent = false;
-            func.children.forEach((child) => {
-              if (!sawComma) {
-                if (child.type === 'Operator' && child.value === ',') {
-                  sawComma = true;
-                }
-                return;
-              }
-
-              let childValue = generate(child).trim();
-              if (child.type === 'Raw') {
-                const emptyTailwindVarPattern = /var\(--tw-[^,()]+,\s*\)/g;
-                childValue = childValue
-                  .replaceAll(emptyTailwindVarPattern, '')
-                  .trim();
-              }
-
-              if (childValue.length > 0) {
-                hasFallbackContent = true;
-              }
-            });
-
-            if (!sawComma || hasFallbackContent) {
-              return;
-            }
-
-            funcList.remove(funcItem);
-          },
-        });
+        stripEmptyTailwindVars(declaration.value);
 
         styles[getReactProperty(declaration.property)] =
           generate(declaration.value).trim() +

package/src/components/tailwind/utils/css/resolve-all-css-variables.spec.ts

@@ -237,6 +237,22 @@ describe('resolveAllCSSVariables', () => {
     );
   });
 
+  it('does not leak variables across sibling nested at-rules within the same rule', () => {
+    const root = parse(`.print_invert {
+  @media print {
+    --tw-invert: invert(100%);
+    filter: var(--tw-invert, none);
+  }
+  @media screen {
+    filter: var(--tw-invert, none);
+  }
+}`);
+    resolveAllCssVariables(root);
+    expect(generate(root)).toMatchInlineSnapshot(
+      `".print_invert{@media print{--tw-invert: invert(100%);filter:invert(100%)}@media screen{filter:none}}"`,
+    );
+  });
+
   it('handles selectors with asterisks in attribute selectors and pseudo-functions', () => {
     const root = parse(`* {
   --global-color: red;

package/src/components/tailwind/utils/css/resolve-all-css-variables.ts

@@ -187,6 +187,43 @@ export function resolveAllCssVariables(node: CssNode) {
         hasReplaced = true;
         break;
       }
+
+      // Both use and definition live inside the same nested @media (or other
+      // at-rule) block of the same rule — e.g. Tailwind v4's
+      //   .print_invert { @media print { --tw-invert: invert(100%); filter: var(--tw-invert,) ... } }
+      // The previous two checks only cover a Rule directly containing the
+      // declaration; this one covers Rule → Block → Atrule → Block → Declaration
+      // on both sides.
+      if (
+        use.path[0]?.type === 'Block' &&
+        use.path[1]?.type === 'Atrule' &&
+        use.path[2]?.type === 'Block' &&
+        use.path[3]?.type === 'Rule' &&
+        definition.path[0]?.type === 'Block' &&
+        definition.path[1]?.type === 'Atrule' &&
+        definition.path[2]?.type === 'Block' &&
+        definition.path[3]?.type === 'Rule' &&
+        use.path[1].name === definition.path[1].name &&
+        (use.path[1].prelude
+          ? definition.path[1].prelude
+            ? generate(use.path[1].prelude) ===
+              generate(definition.path[1].prelude)
+            : false
+          : definition.path[1].prelude === null) &&
+        doSelectorsIntersect(use.path[3].prelude, definition.path[3].prelude)
+      ) {
+        use.declaration.value = parse(
+          generate(use.declaration.value).replaceAll(
+            use.raw,
+            definition.definition,
+          ),
+          {
+            context: 'value',
+          },
+        ) as Raw | Value;
+        hasReplaced = true;
+        break;
+      }
     }
 
     if (!hasReplaced && use.fallback) {

package/src/components/tailwind/utils/css/sanitize-non-inlinable-rules.spec.ts

@@ -1,4 +1,5 @@
 import { generate } from 'css-tree';
+import { sanitizeStyleSheet } from '../../sanitize-stylesheet.js';
 import { setupTailwind } from '../tailwindcss/setup-tailwind.js';
 import { sanitizeNonInlinableRules } from './sanitize-non-inlinable-rules.js';
 
@@ -27,7 +28,27 @@ describe('sanitizeNonInlinableRules()', () => {
 
     sanitizeNonInlinableRules(stylesheet);
     expect(generate(stylesheet)).toMatchInlineSnapshot(
-      `"/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-sky-600: oklch(58.8% 0.158 241.966)!important;--color-gray-100: oklch(96.7% 0.003 264.542)!important}}@layer utilities{.hover_text-sky-600{&:hover{@media (hover:hover){color:var(--color-sky-600)!important}}}.sm_focus_outline-none{@media (width>=40rem){&:focus{--tw-outline-style: none!important;outline-style:none!important}}}.md_hover_bg-gray-100{@media (width>=48rem){&:hover{@media (hover:hover){background-color:var(--color-gray-100)!important}}}}.lg_focus_underline{@media (width>=64rem){&:focus{text-decoration-line:underline!important}}}}"`,
+      `"/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer theme{:root,:host{--color-sky-600: oklch(58.8% 0.158 241.966)!important;--color-gray-100: oklch(96.7% 0.003 264.542)!important}}@layer utilities{.hover_text-sky-600{&:hover{@media (hover:hover){color:var(--color-sky-600)!important}}}.sm_focus_outline-none{@media (width>=40rem){&:focus{outline-style:none!important}}}.md_hover_bg-gray-100{@media (width>=48rem){&:hover{@media (hover:hover){background-color:var(--color-gray-100)!important}}}}.lg_focus_underline{@media (width>=64rem){&:focus{text-decoration-line:underline!important}}}}"`,
+    );
+  });
+
+  it('strips Tailwind v4 variant-stacking var() refs with empty fallbacks inside print: media queries', async () => {
+    // Mirrors the inline-style behavior asserted in make-inline-styles-for.spec.ts.
+    // `print:invert` compiles to a filter value that is a chain of var(--tw-...,)
+    // with empty fallbacks. After resolveAllCssVariables the filter is concrete;
+    // sanitizeNonInlinableRules then drops the leftover --tw-* declarations and
+    // any remaining empty-fallback var() refs.
+    const tailwind = await setupTailwind({});
+    tailwind.addUtilities(['md:block', 'print:invert']);
+    const stylesheet = tailwind.getStyleSheet();
+
+    sanitizeStyleSheet(stylesheet);
+    sanitizeNonInlinableRules(stylesheet);
+    const result = generate(stylesheet);
+
+    expect(result).not.toMatch(/var\(--tw-[^,()]+,\s*\)/);
+    expect(result).toMatchInlineSnapshot(
+      `"/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer utilities{.md_block{@media (width>=48rem){display:block!important}}.print_invert{@media print{filter:invert(100%)!important}}}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}"`,
     );
   });
 

package/src/components/tailwind/utils/css/sanitize-non-inlinable-rules.ts

@@ -1,6 +1,7 @@
 import { type CssNode, string, walk } from 'css-tree';
 import { sanitizeClassName } from '../compatibility/sanitize-class-name.js';
 import { isRuleInlinable } from './is-rule-inlinable.js';
+import { stripEmptyTailwindVars } from './strip-empty-tailwind-vars.js';
 
 /**
  * This function goes through a few steps to ensure the best email client support and
@@ -10,6 +11,12 @@ import { isRuleInlinable } from './is-rule-inlinable.js';
  * What it does:
  * 1. Converts all declarations in all rules into important ones
  * 2. Sanitizes class selectors of all non-inlinable rules
+ * 3. Removes --tw-* custom property declarations — by this point all CSS
+ *    variables have been resolved, so these are dead weight in email HTML.
+ * 4. Strips empty-fallback var(--tw-*,) refs that Tailwind v4 emits for
+ *    variant-stacking idioms (filter, font-variant-numeric, etc.) — email
+ *    clients can't resolve CSS custom properties reliably, so any --tw-*
+ *    left as a bare empty-fallback ref would reach the client broken.
  */
 export function sanitizeNonInlinableRules(node: CssNode) {
   walk(node, {
@@ -25,8 +32,14 @@ export function sanitizeNonInlinableRules(node: CssNode) {
 
         walk(rule, {
           visit: 'Declaration',
-          enter(declaration) {
+          enter(declaration, item, list) {
+            if (declaration.property.startsWith('--tw-')) {
+              list.remove(item);
+              return;
+            }
+
             declaration.important = true;
+            stripEmptyTailwindVars(declaration.value);
           },
         });
       }

package/src/components/tailwind/utils/css/strip-empty-tailwind-vars.spec.ts

@@ -0,0 +1,128 @@
+import {
+  type Atrule,
+  type Declaration,
+  generate,
+  parse,
+  type Rule,
+  type StyleSheet,
+  walk,
+} from 'css-tree';
+import { sanitizeStyleSheet } from '../../sanitize-stylesheet.js';
+import { setupTailwind } from '../tailwindcss/setup-tailwind.js';
+import { isRuleInlinable } from './is-rule-inlinable.js';
+import { sanitizeNonInlinableRules } from './sanitize-non-inlinable-rules.js';
+import { stripEmptyTailwindVars } from './strip-empty-tailwind-vars.js';
+
+describe('stripEmptyTailwindVars()', () => {
+  it('removes empty-fallback var(--tw-*,) refs from declaration values', () => {
+    const stylesheet = parse(`
+      .tabular-nums {
+        font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) tabular-nums var(--tw-numeric-fraction,);
+      }
+    `) as StyleSheet;
+
+    const rule = stylesheet.children.first as Rule;
+    const declaration = rule.block.children.first as Declaration;
+    stripEmptyTailwindVars(declaration.value);
+
+    expect(generate(declaration.value)).toBe('tabular-nums');
+  });
+
+  it('does not remove var() refs with non-empty fallbacks or non --tw- names', () => {
+    const stylesheet = parse(`
+      .thing {
+        line-height: var(--tw-leading, var(--text-lg--line-height));
+        color: var(--my-color,);
+      }
+    `) as StyleSheet;
+
+    const rule = stylesheet.children.first as Rule;
+    const leading = rule.block.children.first as Declaration;
+    const color = rule.block.children.last as Declaration;
+
+    stripEmptyTailwindVars(leading.value);
+    stripEmptyTailwindVars(color.value);
+
+    expect(generate(leading.value)).toBe(
+      'var(--tw-leading, var(--text-lg--line-height))',
+    );
+    expect(generate(color.value)).toBe('var(--my-color,)');
+  });
+
+  it('does not remove --tw-* custom property declarations (only var() usages in values)', () => {
+    const stylesheet = parse(`
+      .print_border-solid {
+        @media print {
+          --tw-border-style: solid;
+          border-style: var(--tw-border-style,);
+        }
+      }
+    `) as StyleSheet;
+
+    const rule = stylesheet.children.first as Rule;
+    const atrule = rule.block.children.first as Atrule;
+    const twDeclaration = atrule.block!.children.first as Declaration;
+    const borderDeclaration = atrule.block!.children.last as Declaration;
+
+    stripEmptyTailwindVars(borderDeclaration.value);
+
+    expect(twDeclaration.property).toBe('--tw-border-style');
+    expect(generate(twDeclaration.value).trim()).toBe('solid');
+    expect(generate(borderDeclaration.value)).toBe('');
+    expect(generate(stylesheet)).toContain('--tw-border-style: solid');
+  });
+});
+
+describe('stripEmptyTailwindVars() with non-inlinable print: rules', () => {
+  it('print:border-solid still leaves --tw-* declarations if only stripEmptyTailwindVars runs', async () => {
+    const tailwind = await setupTailwind({});
+    tailwind.addUtilities(['print:border-solid']);
+    const stylesheet = tailwind.getStyleSheet();
+
+    sanitizeStyleSheet(stylesheet);
+
+    walkDeclarationsInNonInlinableRules(stylesheet, (declaration) => {
+      stripEmptyTailwindVars(declaration.value);
+    });
+
+    const result = generate(stylesheet);
+
+    expect(result).not.toMatch(/var\(--tw-[^,()]+,\s*\)/);
+    expect(result).toMatch(/--tw-[^:]+:/);
+  });
+
+  it('print:border-solid is clean after sanitizeNonInlinableRules removes resolved --tw-* declarations', async () => {
+    const tailwind = await setupTailwind({});
+    tailwind.addUtilities(['print:border-solid']);
+    const stylesheet = tailwind.getStyleSheet();
+
+    sanitizeStyleSheet(stylesheet);
+    sanitizeNonInlinableRules(stylesheet);
+    const result = generate(stylesheet);
+
+    expect(result).not.toMatch(/var\(--tw-[^,()]+,\s*\)/);
+    expect(result).not.toMatch(/--tw-[^:]+:/);
+    expect(result).toMatchInlineSnapshot(
+      `"/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;@layer utilities{.print_border-solid{@media print{border-style:solid!important}}}"`,
+    );
+  });
+});
+
+function walkDeclarationsInNonInlinableRules(
+  node: StyleSheet,
+  onDeclaration: (declaration: Declaration) => void,
+) {
+  walk(node, {
+    visit: 'Rule',
+    enter(rule) {
+      if (!isRuleInlinable(rule)) {
+        walk(rule, {
+          visit: 'Declaration',
+          enter(declaration) {
+            onDeclaration(declaration);
+          },
+        });
+      }
+    },
+  });
+}

package/src/components/tailwind/utils/css/strip-empty-tailwind-vars.ts

@@ -0,0 +1,70 @@
+import { type CssNode, generate, walk } from 'css-tree';
+
+/**
+ * Tailwind v4 emits variant-stacking idioms like
+ *   font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) tabular-nums var(--tw-numeric-fraction,)
+ *   filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-invert,) ...
+ * where each var() has an empty fallback so missing variants collapse to nothing.
+ * Tailwind deliberately leaves these variant vars undefined until used, so they
+ * stay in the output here and produce unresolvable custom properties in email HTML
+ * (no email client supports CSS custom properties reliably). Per the CSS spec
+ * (https://www.w3.org/TR/css-variables-1/#using-variables) an empty fallback means
+ * "use empty string if the variable is undefined", which is exactly what we want.
+ *
+ * Scoped to the `--tw-` prefix so any user-authored empty-fallback var() refs
+ * are left untouched.
+ *
+ * Uses post-order traversal so an outer var(--tw-X, var(--tw-Y,)) collapses
+ * correctly after the inner var() has been removed.
+ */
+export function stripEmptyTailwindVars(node: CssNode) {
+  walk(node, {
+    visit: 'Function',
+    leave(func, funcItem, funcList) {
+      if (func.name !== 'var') {
+        return;
+      }
+
+      let variableName: string | undefined;
+      walk(func, {
+        visit: 'Identifier',
+        enter(identifier) {
+          variableName = identifier.name;
+          return this.break;
+        },
+      });
+      if (!variableName?.startsWith('--tw-')) {
+        return;
+      }
+
+      let sawComma = false;
+      let hasFallbackContent = false;
+      func.children.forEach((child) => {
+        if (!sawComma) {
+          if (child.type === 'Operator' && child.value === ',') {
+            sawComma = true;
+          }
+          return;
+        }
+
+        let childValue = generate(child).trim();
+        if (child.type === 'Raw') {
+          const emptyTailwindVarPattern = /var\(--tw-[^,()]+,\s*\)/g;
+          childValue = childValue
+            .replaceAll(emptyTailwindVarPattern, '')
+            .trim();
+        }
+
+        if (childValue.length > 0) {
+          hasFallbackContent = true;
+        }
+      });
+
+      if (!sawComma || hasFallbackContent) {
+        return;
+      }
+
+      funcList.remove(funcItem);
+    },
+  });
+}

package/tsconfig.json

@@ -35,5 +35,10 @@
     "outDir": "dist"
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"],
-  "exclude": ["dist", "node_modules"]
+  "exclude": [
+    "dist",
+    "node_modules",
+    "src/cli/utils/preview/hot-reloading/test",
+    "src/components/tailwind/e2e"
+  ]
 }