From 66cad1fc5a399d09e6feef00de7e3e42e999ec10 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Fri, 12 Dec 2025 09:27:19 -0300 Subject: [PATCH 1/2] usage of useSuspendPromise only for React <18 --- packages/tailwind/src/tailwind.tsx | 42 ++++++++++++++++++++++++------ 1 file changed, 34 insertions(+), 8 deletions(-) diff --git a/packages/tailwind/src/tailwind.tsx b/packages/tailwind/src/tailwind.tsx index a446255319..6074964648 100644 --- a/packages/tailwind/src/tailwind.tsx +++ b/packages/tailwind/src/tailwind.tsx @@ -8,7 +8,10 @@ import { getCustomProperties } from './utils/css/get-custom-properties'; import { sanitizeNonInlinableRules } from './utils/css/sanitize-non-inlinable-rules'; import { mapReactTree } from './utils/react/map-react-tree'; import { cloneElementWithInlinedStyles } from './utils/tailwindcss/clone-element-with-inlined-styles'; -import { setupTailwind } from './utils/tailwindcss/setup-tailwind'; +import { + setupTailwind, + type TailwindSetup, +} from './utils/tailwindcss/setup-tailwind'; export type TailwindConfig = Omit; @@ -82,13 +85,13 @@ export const pixelBasedPreset: TailwindConfig = { }, }; -export function Tailwind({ children, config }: TailwindProps) { - const tailwindSetup = useSuspensedPromise( - () => setupTailwind(config ?? {}), - JSON.stringify(config, (_key, value) => - typeof value === 'function' ? value.toString() : value, - ), - ); +function Inner({ + children, + tailwindSetup, +}: { + children: React.ReactNode; + tailwindSetup: TailwindSetup; +}) { let classesUsed: string[] = []; let mappedChildren: React.ReactNode = mapReactTree(children, (node) => { @@ -168,3 +171,26 @@ please file a bug https://github.com/resend/react-email/issues/new?assignees=&la return mappedChildren; } + +let Component: React.FunctionComponent; + +if (React.version.startsWith('19')) { + Component = async function Tailwind({ children, config }: TailwindProps) { + const tailwindSetup = await setupTailwind(config ?? {}); + + return ; + }; +} else { + Component = function Tailwind({ children, config }: TailwindProps) { + const tailwindSetup = useSuspensedPromise( + () => setupTailwind(config ?? {}), + JSON.stringify(config, (_key, value) => + typeof value === 'function' ? value.toString() : value, + ), + ); + + return ; + }; +} + +export { Component as Tailwind }; From 9a639c8607f0825ed62ff082f5de9b4252f1fa93 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Fri, 12 Dec 2025 09:31:44 -0300 Subject: [PATCH 2/2] update snaps --- packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap b/packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap index aff05301d5..23ee054f4a 100644 --- a/packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap +++ b/packages/tailwind/src/__snapshots__/tailwind.spec.tsx.snap @@ -1,12 +1,12 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Tailwind component >