Building responsive emails with Tailwind with <Html> and <Head/> separate component #1937

levelingup · 2025-02-28T01:22:42Z

levelingup
Feb 28, 2025

I have a unique situation where I'm trying to use tailwind's responsive classes such as md:flex

I have a a separate component that has the necessary components. and (from this pull: #502)

const EmailTemplate = () => {
    return (
        <Html lang="en" dir="ltr">
            <Head>
                <meta charSet="UTF-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            </Head>
            <Body>
                <Tailwind>
                    <div className="w-full mx-auto">
                        {layout.map((item, index) => {
                            return (
                                <div
                                    key={index}
                                    dangerouslySetInnerHTML={{ __html: item.html }}
                                />
                            );
                        })}
                    </div>
                </Tailwind>
            </Body>
        </Html>
    );
};

export default EmailTemplate;

And then I have a separate component like:

const HeaderTemplate = () => {
    return (
        <Tailwind>
            <div className="max-w-[750px] m-auto mb-8">
                {/* Mobile */}
                <div className="visible md:invisible">
                    <Section className='w-full mb-8'>
                        <Row>
                            <Column className="center">
                                <Img className="m-auto" src="mobile-image-url" height="65" width="auto" />
                            </Column>
                        </Row>
                    </Section>
                </div>
                {/* Desktop */}
                <div className="invisible md:visible">
                    <Section className='w-full mb-8'>
                        <Row>
                            <Column className="center px-14">
                                <Img className="m-auto" src="desktop-image-url" height="40" width="auto" />
                            </Column>
                        </Row>
                    </Section>
                </div>
            </div>
        </Tailwind>
    )
}

export default HeaderSculptTemplate;

With this method, I'm getting an error saying that I <Html> and <Head /> for the responsive classes to work.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Building responsive emails with Tailwind with <Html> and <Head/> separate component #1937

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Select a reply

Uh oh!

Building responsive emails with Tailwind with <Html> and <Head/> separate component #1937

Uh oh!

levelingup Feb 28, 2025

Replies: 1 comment

levelingup
Feb 28, 2025