Skip to content

Tailwind doesn't recognize the Head component when NODE_ENV="production" #1112

@laurisbernhart

Description

@laurisbernhart

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

(typeof element.type === "function" &&
"name" in element.type &&
element.type.name === "Head")

Best Lauris

What's your node version? (if relevant)

v18.16.0

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions