-
Notifications
You must be signed in to change notification settings - Fork 810
Closed
Labels
Description
First, thanks for improving the email DX so much with this library🙌
Describe the Bug
When using the Head component as a direct child of Tailwind:
If NODE_ENV is set to production, I receive the following error:
Tailwind: To use responsive styles you must have a element as a direct child of the Tailwind component.
If NODE_ENV is set to development, it will work as expected.
Does not work in production:
<Tailwind config={...} >
<Head>
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
</Head>
...
</Tailwind>
Workaround
Using a normal head tag works when NODE_ENV is set to production.
<Tailwind config={...} >
<head>
<meta content="text/html; charset=UTF-8" httpEquiv="Content-Type" />
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
</head>
...
</Tailwind>
Without digging deeper and trying it out, my best guess is that this check fails in production
react-email/packages/tailwind/src/tailwind.tsx
Lines 181 to 183 in 778f3b0
(typeof element.type === "function" && | |
"name" in element.type && | |
element.type.name === "Head") |
Best Lauris
What's your node version? (if relevant)
v18.16.0
juliuslipp, QuentinFrc, chukwumaijem, ababol and antoinerousseau