Description
The new Tailwind component makes it quite impossible to use hooks or context w/ react email.
As I'm using react-i18next for i18n, I'm using the useTranslation hook. So I'm not having a dynamic use case either, just using available tools.
Also, I'm using context to pass around some shared data without using prop drilling.
My workaround till now was having Tailwind as my root, so it won't interfere w/ context etc.
However, this won't work with the rewrite, as it's now required to have the <head> as a direct descendant of <Tailwind>.
The hooks issue was also mentioned in #1021, and also what's the probable cause:
@gabrielmfern that does seem a little weird to me, as I do expect hooks to run for other "static" use cases like static site generation or server-side rendering, especially as async server side rendering is becoming more of a thing, and indeed hooks run fine with
renderToStaticMarkup. React contexts also work fine in static rendering, the issue is with how thetailwindfunction traverses the component tree and calls components as plain functions: https://github.com/resendlabs/react-email/blob/2374d0d099360c63fe7427febb239776c3bd6b3b/packages/tailwind/src/tailwind.tsx#L95C32-L95C32.For now my workaround is using
<MyReactContext.Consumer>{context => ...}</MyReactContext.Consumer>instead of the hook.
That's interesting, then I think this is an actual issue with the new Tailwind version, can you open an issue on this so we can reference it on a PR and discuss it there?
Originally posted by @gabrielmfern in #1021 (comment)